Question

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

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

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

请参阅此jsfiddle

我希望建立的规则是：

食谱只能在顶级列表中上下排序，不能放入部分
章节只能在顶级列表中上下排序，不能嵌套在一个部分中
成分可以在顶级列表中上下分类，也可以放入一个部分
部分成分可以在部分内上下分类，部分成分可以拖到顶级列表中。进入顶级列表后，可以将它们拖回到某个部分（或从一个部分拖到另一个部分）

这就是我所拥有的：

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

为Jquery UI Sortables定义删除规则

1 个答案: