jQuery可排序和可丢弃
我希望有一个可排序的列表，但我也希望该列表中的元素可以放到我定义为droppable的div中。 我似乎无法找到办法。 有任何想法吗？
这是Colin解决方案的简化版本。
最大的区别是这个解决方案不存储可排序元素的整个html，而只存储当前拖动的项目。 如果物品掉落在可投放区域，则将其插入其原始位置。
无论如何，这是代码：
- One
- Two
- Three
- Four
- Five
- Six
Drop Here Drop Here 如果将一个项目拖入列表中的新位置然后放在
和droppable
之外，它仍然会遇到与Colin解决方案相同的问题。 然后该项目不会重置，而是取列表中的最后一个位置（在Google Chrome中测试）。 无论如何，这可以通过一些鼠标过度检测轻松解决，或者甚至可能是理想的行为。
据我所知，我发布的前一个代码的问题是droppable的drop函数在sortable的mouseup之前被调用，并且因为我重新编写了列表，所以sortable变得生气（因为缺乏更好的术语） ）。 这有点猜测。
看最后的代码：
- One
- Two
- Three
- Four
- Five
- Six
Drop Here
这里涉及大量的怪癖。
我试图将#sortable html保存在sortable的start事件上，但是在所有ui-css被应用之后调用了它，并最终将列表元素放在疯狂的地方。 所以，我需要在LI上使用mousedown函数。
setSortable在一个函数中，因为stop事件重写了sortable，我想这是“递归的”。 不确定这里的确切术语，但我们可以烦人地混淆。
幸运的是，在sortables停止函数之前调用droppable的drop函数，因此我能够设置一个全局“drop”变量，用于查看元素是否被删除。
我仍然感到惊讶，这并不容易，我认为jQuery会有更好的处理function。 也许我错过了什么？
不完全是你要求的，但我需要一个初始容器，其中的项目可以拖动到另一个可排序的容器 – 并认为我应该分享它。 这就是我实现它的方式（jQuery 1.8.3）：
$("#sortable-list").sortable(); $("#initial-list div").draggable({ revert: true, revertDuration: 0 }); $("#initial-list").droppable({ accept: ".item-selected", drop: function(e, ui) { var dropped = ui.draggable; var droppedOn = $(this); var itemInOtherList = $(this).children("#" + dropped.attr('id')); itemInOtherList.removeClass('ui-state-disabled').draggable({ disabled: false }); dropped.remove(); } }); $("#sortable-list").droppable({ accept: ".item-initial", drop: function(e, ui) { var dropped = ui.draggable; var droppedOn = $(this); droppedOn.append(dropped.clone() .removeAttr('style') .removeClass("item-initial") .addClass("item-selected")); dropped.animate(dropped.data().origPosition, { complete: function() { $(this).addClass('ui-state-disabled').draggable({ disabled: true }); } }); } });
JSFiddle： http ： //jsfiddle.net/Muskar/dwz4mvxa/8/
我已经花了一整天的时间，而且我已经离得更近了，但仍然没有像我想的那样好。 我现在拥有我需要的function，但是Javascript错误正在被抛出。
如果元素在droppable中而不是在列表中被删除，则问题是使可排序列表返回到其先前的位置。 目前，我正在保存html onmousedown，然后在droppable的drop函数中重写html。 这有效，但它给我一个jquery变量是null错误。 谁能找到更好的解决方案？
码：
- One
- Two
- Three
- Four
- Five
- Six
Drop Here
能够通过使每个目标DIV成为他们自己的可排序来获得类似的最终结果。
然后，我通过connectWith，使所有可排序的连接和共享可拖动。
就像是：
var connects = '#main_sortable, div.target'; $('#main_sortable').sortable({ connectWith: connect }); $('div').sortable({ connectWith: connect} );
如果您也可以允许其他可放置区域进行排序，则可以将connectWith选项与公共选择器一起使用：
你的jQuery代码将是：
$('.droppable-area').sortable({ connectWith: '.droppable-area' });
无论如何，这个解决方案非常适合我。