使用 jquery 拖放列表项

【问题标题】：List Items drag and drop using jquery使用 jquery 拖放列表项
【发布时间】：2016-02-03 18:04:15
【问题描述】：

我有一个嵌套列表项，想实现拖放功能。

场景：

1. 一级树形结构
2. 直接在根节点和第一级树节点上的子项
3. 将子项移出树节点或移入树节点
4. 限制树节点拖动

HTML

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="folder"> Empty Folder
    <ul id="sortable1" class="connectedSortable">

    </ul>
  </li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="folder"> Folder 1
    <ul id="sortable2" class="connectedSortable">
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
  </ul>
  </li>
  <li class="ui-state-default">Item 7</li>
  <li class="ui-state-default">Item 8</li>
  <li class="folder"> Folder 2
    <ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>
  </li>
</ul>

JS/jQuery

$(function() {
    $( ".connectedSortable" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });

JS Fiddle 的示例

我也希望能够将项目移入空文件夹，限制文件夹移动，限制排序项目，仅在项目移出时移动的文件夹或文件夹中。并且在成功移动时调用一个函数，我可以在其中读取项目 ID 和文件夹 ID 并执行一些逻辑。

【问题讨论】：

• 我很困惑。在您的示例中，您可以将项目移动到空文件夹中。
• @Stryner 如果你看到我的标记，有一个“空文件夹”
• 空文件夹
  我应该能够将一个项目移入其中。目前在我的 JS Fiddle 中它不起作用。