手風琴遏制無法正常工作

Question

我已經使用手風琴構建了一個父子系統。 結構如下

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

我還添加了拖放功能。 我的要求是我不希望將孩子從當前的父母中拖出。 它只能在當前父級中拖動和替換。 例如，孩子1,2和3的位置可以與拖動互換，但孩子2不應進入parent2和parent3內。 另外，不應該允許parent2子級拖動parent1和parent2

我進行了一項研究，發現手風琴提供了一種財產收容措施：parent，但是它不能正常工作。 誰能幫我解決這個問題？

<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>

Answer 1

為了實現這些類型的事情，您可以使用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();
        }
}