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，它会起作用。我刚刚使用下面的li作为示例。

演示：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'
    });
});

连接到可拖动时，预先存在的项目不可排序

1 个答案: