Question

我有两个无序列表。所需的功能是; 1）左窗格（#sortable）无法在自身内进行排序 2）右侧面板（＃sortable1）可以在其自身内进行排序 3）左侧面板中的项目可以拖放到右侧面板上 4）右侧面板中的项目不能下注拖放到左侧面板上。 5）被拖动的项目应该有一个占位符可以放在右侧面板上的项目之间的任何位置。

目前，以下代码执行1,2,3,4。当涉及到5时，当前被删除的项目被放置在右侧列表的顶部（使用.prepend）。

我无法弄清楚的是，如何将项目放在列表中的任何位置（不仅仅是开头或结尾），并在右侧面板中拖动项目时使用占位符？

JQUERY

$('#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>

任何帮助都将不胜感激。

Answer 1

不使用jquery draggable的connectWith选项，而是使用connectToSortable选项。这比您当前的代码有两个优势。

您将获得所需的功能，而不会影响其他功能。
您不必将＃sortable1定义为droppable

遵守被删除的订单并在使用jQueryUI draggable / droppable删除时显示占位符

1 个答案: