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用户界面不排序使用排序，只需将

回答

相关问题