JQuery用戶界面不排序使用排序，只需將

這裏是我的小提琴：http://jsfiddle.net/MtgbM/JQuery用戶界面不排序使用排序，只需將

這裏的規則：列表-A是我的產品清單。

我不應該能夠重新排序列表-A
我不應該能夠「刪除」從列表-A的事情（當他們拖着列出-B仍停留在列表-A，但副本被移動到列表B）
我不應該能夠從列表-B拖東西列出-A

列表-B是我的源

我可以刪除項目來自李ST-B（拖動它們關閉）
我可以重新排序列表-B

項目這幾乎是它。基本上List-A是來源，List-B是目的地。我看到的大部分內容都可以使用JQuery配置，我不確定的是List-A上的子彈＃1和＃2。我如何製作List-A「不穩定」，以及如何製作「克隆」而不是移動項目？

任何幫助，將不勝感激

來源

2012-01-06 samwise

你不想要的一切可排序這一點。

的<li> S IN的頂部列表應draggables與helper: 'clone'，這helper選項，可以拖動<li> S的副本淘汰之列，而不改變列表本身。所以，在開始使用此：

$('#list-A li').draggable({ 
    helper: 'clone' 
});

然後，你需要做的底部列表droppable並且希望時，他們下降到克隆的元素。您可以使用drop事件做克隆：

$('#list-B ul').droppable({ 
    drop: function(event, ui) { 
     $(this).append($(ui.draggable).clone()); 
    } 
});

你希望能夠在底部列表中移動的東西，這就是sortable進來，使其底部列表應該排序以及可投放。當你僅僅對它們進行排序的時候，你還必須保持克隆的可用性。您可以使用start和stop可排序事件來設置data標誌，然後檢查可丟棄drop事件處理程序中的該標誌。像這樣的排序：

$('#list-B ul').sortable({ 
    start: function(event, ui) { 
     ui.item.data('sorting', true); 
    }, 
    stop: function(event, ui) { 
     ui.item.removeData('sorting'); 
    } 
});

，然後添加一個檢查到drop事件處理程序：

$('#list-B ul').droppable({ 
    drop: function(event, ui) { 
     if(ui.draggable.data('sorting')) 
      return; 
     $(this).append($(ui.draggable).clone()); 
    } 
});

演示：http://jsfiddle.net/ambiguous/PyWAM/

來源

2012-01-06 03:24:42

AHAH！輝煌！ – samwise 2012-01-06 12:00:44

JQuery用戶界面不排序使用排序，只需將

回答

相關問題