连接到 Draggable 时，现有项目不可排序

Question

我有一个设置页面，用户可以在其中将项目从单个列表拖到其他三个列表中的任何一个中，以在他们的网站上构建内容块。单个列表是 jQuery Draggable，其他三个列表是 Sortables。基本上是这样的。

<div class="sourceItems">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
</div>

<div class="destination"></div>
<div class="destination"></div>
<div class="destination"></div>

这是 jQuery。

(function ($) {
  $(document).ready(function () {
    $("div.destination").sortable({
      revert: true,
      update: function (event, ui) {
        // Some code to prevent duplicates
      }
    });
    $("div.sourceItems").draggable({
      connectToSortable: '.destination',
      cursor: 'pointer',
      helper: 'clone',
      revert: 'invalid'
    });
  });
})(jQuery);

问题是，当用户返回编辑其设置时，我必须将先前保存的项目加载到三个可排序列表中。页面加载时已经在 Sortable 中的那些项目实际上是不可排序的。只有从 Draggable 拖动的项目是可排序的。如何使预先存在的项目也可排序？

Answer 1

如果您将它们设为列表或 div，它会起作用。我刚刚以下面的lis 为例。

演示：http://jsfiddle.net/robschmuecker/LMGg8/

HTML：

<div>Draggable source items
    <ul>
        <li class="draggable" class="ui-state-highlight">Drag me down</li>
    </ul>
</div>
<div>Sortable List 1
    <ul class="sortableList">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
</div>
<div>Sortable List 2
    <ul class="sortableList">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
</div>
<div>Sortable List 3
    <ul class="sortableList">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
</div>

JS

$(document).ready(function () {
    $(".sortableList").sortable({
        revert: true,
        /*update: function (event, ui) {
            // Some code to prevent duplicates
        }*/
    });
    $(".draggable").draggable({
        connectToSortable: '.sortableList',
        cursor: 'pointer',
        helper: 'clone',
        revert: 'invalid'
    });
});