JQuery UI：取消Droppable Drop可排序

我正在使用JQuery 1.5.1和JQuery UI 1.8.11。

我已经添加了一些项目的可排序 – 这里的任务是允许拖动排序，这一切都很好。

但我也希望合并droppable，以便可以将项目放到“复制我”区域 – 任务将复制项目（我稍后会工作）

问题是可放置目标位于可排序列表的底部（我不想移动它），一旦发生丢弃，可排序项目就会移动到列表的底部。

我想要做的是在drop事件触发时取消此类。

你可以在这里看到我的问题 （只需将“Item 1”拖到“Drop to Copy Item”区域，你就会看到排序没有被取消）

正如您所看到的，我在droppable“drop”事件中尝试了以下内容（从JQuery UI Docs建议），但它似乎不起作用……

$(this).sortable('cancel'); 

我也对如何实现我正在寻找的“复制”效果的任何其他建议持开放态度。

谢谢

Answer 1

好的，所以我找到了一个完成这项工作的解决方案。

如果您在可排序函数的“停止”事件中有取消代码，它将起作用。 但是，只有在“恢复”完成后才会应用。 问题是我试图从droppable“drop”事件中复制/恢复元素，这太早了。

解决方案是等待“停止”事件完成，为了实现这一点，我必须创建一个“等待副本”标志，以便在“停止”事件中进行检查。

这是一个例子

它仍然感觉不对（UX-wise）但它工作正常，你总是可以在可排序函数上设置revert为false以获得更好的感觉。

示例中的代码如下……

 var itemCount = 3; var awaitingCopy = false; $(init); function init() { $("#Items").sortable({ revert: true, placeholder: "ItemPlaceHolder", opacity: 0.6, start: StartDrag, stop: StopDrag }); $("#CopyItem").droppable({ hoverClass: "CopyItemActive", drop: function(event, ui) { awaitingCopy = true; } }); $("#NewItem").click(function(e) { e.preventDefault(); itemCount++; var element = $("
Item " + itemCount + "
"); $("#Items").append(element); element.hide().slideDown(500); }); } function CopyItem(element) { awaitingCopy = false; var clone = element.clone(); $("#Items").append(clone); clone.hide().slideDown(500); } function StartDrag() { $("#NewItem").hide(); $("#CopyItem").show(); } function StopDrag(event, ui) { if (awaitingCopy) { $(this).sortable('cancel'); CopyItem($(ui.item)); } $("#NewItem").show(); $("#CopyItem").hide(); } 

无论如何，希望这会帮助那些想要同样效果的人……虽然没有偷我的设计;）