代码之家  ›  专栏  ›  技术社区  ›  ankur

手风琴安全壳工作不正常

  •  0
  • ankur  · 技术社区  · 7 年前

    我用手风琴建立了一个父母和孩子的系统。结构如下所示

    parent1
      child1
      child2
      child3
    parent2
      child4
      child5
      child6
    parent3
      child7
      child8
      child9
    

    我还添加了一个拖放功能。我的要求是,我不希望孩子从当前的父母那里拖出来。只能在当前父级中拖动和替换它。例如儿童1、2和;3位置可以与拖动互换,但不应允许子2进入父2&parent3。此外,不应允许parent2子级拖入parent1和parent2

    我做了一项研究,发现手风琴提供了一种 包容:父级 但它不能正常工作。有人能帮我解决这个问题吗?

    <div id="available_fields_container" class="accordion list_container ui-sortable active" data-accordion="one">
      <dd class="accordion-navigation active" id="data_download_fields">
        <a href="#data_download_fields">
          <b>FootBall Fields</b>
          <span class="collapse-symbol"></span>
        </a>
        <span class="select-group" data-fields="#data_download_fields">Select all</span>
        <div id="data_download_fields" class="content active" data-group="FootBall Fields">
    
          <div class="field_items"  data-index="4" data-group="FootBall Fields">
            Andrew
            <span class="plus-icon action-icon">+</span>
            <i class="icon-cross2 action-icon"></i>
          </div>
          <div class="field_items"  data-index="5" data-group="FootBall Fields">
            Sam
            <span class="plus-icon action-icon">+</span>
            <i class="icon-cross2 action-icon"></i>
          </div>
    
        </div>
      </dd>
    
        <dd class="accordion-navigation " id="data_download_hockey_fields">
          <a href="#data_download_hockey_fields">
            <b>hockey Fields</b>
            <span class="collapse-symbol"></span>
          </a>
          <span class="select-group" data-fields="#data_download_hockey_fields">Select all</span>
          <div id="data_download_hockey_fields" class="content " data-group="hockey Fields">
              <div class="field_items"  data-index="0" data-group="hockey Fields">
      jason
        <span class="plus-icon action-icon">+</span>
        <i class="icon-cross2 action-icon"></i>
      </div>
      <div class="field_items"  data-index="1" data-group="hockey Fields">
      Jane
        <span class="plus-icon action-icon">+</span>
        <i class="icon-cross2 action-icon"></i>
      </div>
    
          </div>
        </dd>
    
    </div>
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Aniket Tiwari    7 年前

    为了实现这些类型的功能,可以使用jquery可排序回调。 在你的情况下,你需要 开始 出来 回调函数

    var before_drag;
    
    start: function(event, ui){
      before_drag = ui.item.parent().attr('id')
    }
    
    out: function(event, ui){
      var after_drag = ui.item.parent().attr('id')
            if(before_drag != after_drag){
              event.preventDefault();
              event.stopPropagation();
            }
    }