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进行拖放

2 个答案: