列表項拖放使用jquery

Question

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

場景：樹節點

移動子項出樹節點的或在以樹節點

限制根節點直接上和在第一水平

1. 一層樹結構
2. 子項樹節點拖動

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

這就是我最終完成它的方式。 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; 
    } 

Answer 2

對於具有拖放式樹視圖，您最好使用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); 
     } 
     }); 
    }); 

demo，這是非常好的，好的，它使用幾個應用程序，菜單，類別和其他嵌套東西