服從被刪除的訂單，並顯示佔位符，而與jQueryUI拖動/ droppable

我有兩個無序列表。所需的功能是; 1）左側窗格（#sortable）不能在其內部排序 2）右側窗格（＃sortable1）可以在其內部排序 3）可以將左側窗格中的項目拖放到右側的面板上 4）右側面板上的物品不能下注到左側的面板上。 5）正在拖動的項目應該有一個佔位符可用於放置在右側面板上的項目之間的任何地方。服從被刪除的訂單，並顯示佔位符，而與jQueryUI拖動/ droppable

此刻，下面的代碼是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>

任何幫助，將不勝感激。

來源

2013-06-22 Kemal Emin

不使用jQuery可拖動的connectWith選項，而是使用connectToSortable選項。這將比你現在的代碼有兩個優點。

您將在不影響其他功能的情況下獲得所需的功能。
您不必將＃sortable1定義爲可丟棄

來源

2013-06-24 13:35:06

服從被刪除的訂單，並顯示佔位符，而與jQueryUI拖動/ droppable

回答

相關問題