使用 jquery 拖放列表项

Question

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

场景：

一级树结构
直接在根节点和第一级树节点中的子项
将子项移出树节点或移入树节点
限制树节点拖动

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 并执行一些逻辑。

Answer 1

有拖放树视图，最好用nestedSortable，很简单。这是您如何使用它的示例

<ol class="sortable">
    <li id="list_1"><div><span class="disclose"><span></span></span>Item 1</div>
      <ol>
        <li id="list_2"><div><span class="disclose"><span></span></span>Sub Item 1.1</div>
          <ol>
            <li id="list_3"><div><span class="disclose"><span></span></span>Sub Item 1.2</div>
          </ol>
      </ol>
    <li id="list_4"><div><span class="disclose"><span></span></span>Item 2</div>
    <li id="list_5"><div><span class="disclose"><span></span></span>Item 3</div>
      <ol>
        <li id="list_6" class="mjs-nestedSortable-no-nesting"><div><span class="disclose"><span></span></span>Sub Item 3.1 (no nesting)</div>
        <li id="list_7"><div><span class="disclose"><span></span></span>Sub Item 3.2</div>
          <ol>
            <li id="list_8"><div><span class="disclose"><span></span></span>Sub Item 3.2.1</div>
          </ol>
      </ol>
    <li id="list_9"><div><span class="disclose"><span></span></span>Item 4</div>
    <li id="list_10"><div><span class="disclose"><span></span></span>Item 5</div>
  </ol>

和 javascripts

  $(document).ready(function(){
      $('ol.sortable').nestedSortable({
        forcePlaceholderSize: true,
        handle: 'div',
        helper: 'clone',
        items: 'li',
        opacity: .6,
        placeholder: 'placeholder',
        revert: 250,
        tabSize: 25,
        tolerance: 'pointer',
        toleranceElement: '> div',
        maxLevels: 3,

        isTree: true,
        expandOnHover: 700,
        startCollapsed: true,
        start: function(e, ui) {
          //some code
        },
        receive: function(e, ui) {
         //some code
        },
        stop: function(e, ui) {
            //code of Serialize
            //this happend when the move complete
            var treeSerialize = jQuery('ol.sortable').nestedSortable('updatecategories', {startDepthCount: 0});
            console.log(treeSerialize);
        }
      });
  });

demo，非常好用，它用在几个应用程序上，用于菜单、类别和其他嵌套的东西

Answer 2

这就是我最终完成它的方式。 Fiddle Demo

Javascript

$(function() {
   // $( "ul[id^='sortable']" ).sortable({
  //    connectWith: ".connectedSortable"
   // }).disableSelection();
   $( "li.product" ).draggable({
      appendTo: "body",
      helper: "clone"
    });
     $( ".folder" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
        //$( this ).find( ".placeholder" ).remove();
        //$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        alert("Dragging Product Id is "+$(ui.draggable).attr("id") + "Dropping Folder Id is "+ $(event.target).attr("id"));
      }
    })
  });

加价

<ul id="sortablex"><li class="folder"> 
<ul>
  <li  id="1" class="ui-state-default product">Product 1</li>
</ul>

  </li>
  <li id="1"  class="folder"> Empty category
    <ul id="sortable1" class="connectedSortable">

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

CSS

folder{
   color:#c30;
   font-weight:bold;
  }
  .folder ul{
    color:#000;
    font-weight:normal;
  }

使用 jquery 拖放列表项

List Items drag and drop using jquery

javascript

treeview

jquery

drag-and-drop