使用jQuery拖放項目

Question

我有一個嵌套的列表項，並希望實現拖放功能。

場景：

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並執行一些邏輯。

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>

和JavaScript

  $(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);
        }
      });
  });

演示 ，非常好，非常好，可以在多個應用程序中使用它，用於菜單，類別和其他嵌套內容

Answer 2

這就是我最終完成它的方式。 小提琴演示

Java腳本

$(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;
  }