0

我有两个无序列表。所需的功能是；1) 左侧面板 (#sortable) 不能在自身内部排序 2) 右侧面板 (#sortable1) 可以在自身内部排序 3) 左侧面板中的项目可以拖放到右侧面板上 4) 来自左侧面板的项目右侧面板不能拖放到左侧面板上。5) 被拖动的项目应该有一个占位符，可以放置在右侧面板项目之间的任何位置。

目前，以下代码执行 1、2、3、4。当涉及到 5 时，当前放置的项目位于右侧列表的顶部（带有 .prepend）。

我不知道的是，如何将项目放在列表中的任何位置（不仅仅是开头或结尾）并在右侧面板中拖动项目时有一个占位符？

查询

$('#sortable li').draggable({
    cursor: 'pointer',
    connectWith: '#sortable1',
    helper: 'clone',
    opacity: 0.5,
    zIndex: 10
});

$('#sortable1').sortable({
    connectWith: '#sortable',
    cursor: 'pointer',
    containment: '#sortable1'
  }).droppable({
      accept: '#sortable li',
      activeClass: 'highlight',
      drop: function (event, ui) {
          var $li = $('<li>').addClass('ui-state-highlight').html(ui.draggable.html());
      $li.prependTo(this);
      }
    });
});

HTML

<ul id="sortable">
  <li class="ui-state-default" id="4778">Item 1 Right</li>
  <li class="ui-state-default" id="4777">Item 2 Right</li>
  <li class="ui-state-default" id="4773">Item 3 Right</li>
  <li class="ui-state-default" id="4772">Item 4 Right</li>

</ul>

<ul id="sortable1">
  <li class="ui-state-highlight" id="4778">Item 1 Right</li>
  <li class="ui-state-highlight" id="4777">Item 2 Right</li>
  <li class="ui-state-highlight" id="4773">Item 3 Right</li>
  <li class="ui-state-highlight" id="4772">Item 4 Right</li>

</ul>

任何帮助，将不胜感激。

4

1 回答 1

0

不要使用 jquery 可拖动的 connectWith 选项，而是使用connectToSortable选项。与您当前的代码相比，这将有两个优点。

  1. 您将获得您正在寻找的必要功能，而不会影响其他功能。
  2. 您不必将 #sortable1 定义为可放置的
于 2013-06-24T13:35:06.637 回答