为 Jquery UI Sortables 定义删除规则

Question

我有一些包含一些嵌套元素的列表。使用 JQuery UI sortables，我可以拖放并运行后台调用来保存排序顺序。

现在有必要详细说明基本排序并定义一些规则。

我可以到达那里，但现在无法到达那里。

请看这个jsfiddle

我希望建立的规则是：

1. 食谱只能在顶级列表中上下排序，不能放到一个部分中
2. 节只能在顶级列表中上下排序，不能嵌套到节中
3. 成分可以在顶级列表中上下排序，并且可以放入一个部分中
4. 部分成分可以在部分内上下排序，部分成分可以拖出到顶级列表中。一旦进入顶级列表，它们就可以被拖回一个部分（或从一个部分到另一个部分）

这是我所拥有的：

<div>
<ul class="isort rsort ssort">
    <li class="recipe" >Recipe 1</li>
     <li class="section">Section
        <ul class="isort">
            <li class="ingredient" >Ingredient A</li>
            <li class="ingredient">Ingredient B</li>
            <li class="ingredient">Ingredient C</li>
         </ul>
     </li>
     <li class="ingredient">Ingredient 1</li>
     <li class="ingredient">Ingredient 2</li>
     <li class="recipe" >Recipe 2</li>
      <li class="section">Section 2
        <ul class="isort">
            <li class="ingredient" >Ingredient D</li>
            <li class="ingredient">Ingredient E</li>
            <li class="ingredient">Ingredient F</li>
         </ul>
     </li>
</ul>

$("ul.isort").sortable({
    items: '.ingredient',
    connectWith: "ul.isort",
    placeholder: "ui-state-highlight",
    update: function(evt, ui) {
     //alert('dropping i sort');
    }
}); 

$("ul.rsort, ul.ssort").sortable({
    items: '.recipe,.section',
    connectWith: "ul > li > ul > li",
    placeholder: "ui-state-highlight",
    update: function(evt, ui) {
     //alert('dropping s and r sort');
    }
});

如您所见，除了将顶级成分拖入部分之外，我可以完成大部分工作。此外，一旦一种成分被丢弃，它有时就无法再次移动。感谢您的阅读。

Answer 1

经过大量令人费解和审查这里的文档和其他问题后，我想出了这个解决方案，有一个 jsfiddle。拖动到不允许下拉列表的项目将返回到其原始位置。

(function($) {

$('.sortable').sortable({
  connectWith: 'ul',
  items: "li",
  beforeStop: function(evt, ui) {
    if ($(ui.item).hasClass('recipe') && $(ui.placeholder).parent()[0] != this) {
      $(this).sortable('cancel');
    }
    if ($(ui.item).hasClass('section') && $(ui.placeholder).parent()[0] != this) {
      $(this).sortable('cancel');
    }
  },
  update: function(evt, ui) {
      alert('landed');
    }
  });

})(jQuery);

HTML:

<ul id="main" class="sortable">
  <li id="item1" class="ingredient">Ingredient 0.1</li>
  <li id="item2" class="ingredient">Ingredient 0.2</li>
  <li id="item3" class="section">Section 1
    <ul id="sub1">
      <li id="item31" class="ingredient">Ingredient 1.1</li>
      <li id="item32" class="ingredient">Ingredient 1.2</li>
    </ul>
  </li>
  <li id="item4" class="section">Section 2
    <ul id="sub2">
      <li id="item41" class="ingredient">Ingredient 2.1</li>
      <li id="item42" class="ingredient">Ingredient 2.2</li>
    </ul>
  </li>
  <li id="item5" class="recipe">Recipe 0.1</li>
  <li id="item6" class="recipe">Recipe 0.2</li>
</ul>