javascript JQuery UI:在 Droppable Drop 时取消 Sortable
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7834199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI: Cancel Sortable upon Droppable Drop
提问by musefan
I am using JQuery 1.5.1 and JQuery UI 1.8.11.
我正在使用 JQuery 1.5.1 和 JQuery UI 1.8.11。
I have added sortable for a number of items - the task here is to allow drag to sort, this all works fine.
我为许多项目添加了可排序 - 这里的任务是允许拖动排序,这一切正常。
But I also want to incorporate droppable, so that the item can be dropped onto a "copy me" area - the task there will be to duplicate the item (I will work that bit out later)
但我也想合并 droppable,以便项目可以放到“复制我”区域 - 那里的任务是复制项目(我稍后会解决这个问题)
Problem is the droppable target is at the bottom of the sortable list (I do not want to move this) and once the drop occurs the sortable item moves to the bottom of the list.
问题是可放置的目标位于可排序列表的底部(我不想移动它),一旦发生放置,可排序的项目就会移动到列表的底部。
What I want to do is cancel this sort when the drop event fires.
我想要做的是在 drop 事件触发时取消这种排序。
You can see my problem in action here(just drag "Item 1" onto the "Drop to Copy Item" area and you will see the sort does not get cancelled)
您可以在此处查看我的问题(只需将“项目 1”拖到“拖放到复制项目”区域,您就会看到排序不会被取消)
As you can see I have tried the following in the droppable "drop" event (suggested from JQuery UI Docs) but it does not seem to work...
如您所见,我在 droppable "drop" 事件中尝试了以下操作(从 JQuery UI Docs 中推荐),但它似乎不起作用......
$(this).sortable('cancel');
I am also open to any other recommendations on how to achieve this "drop to copy" effect I am looking for.
我也愿意接受关于如何实现我正在寻找的这种“拖放复制”效果的任何其他建议。
Thanks
谢谢
采纳答案by musefan
OK, so I have worked out a solution which does the job.
好的,所以我已经制定了一个解决方案来完成这项工作。
the cancel code does work if you have it in the "stop" event of the sortable function. However, it will only apply once the "revert" has completed. The problem is that I was trying to copy/revert the element from the droppable "drop" event and this was too early.
如果您在 sortable 函数的“停止”事件中有取消代码,它就可以工作。但是,它仅在“还原”完成后才适用。问题是我试图从可放置的“放置”事件中复制/还原元素,这为时过早。
The solution is to wait for the "stop" event to complete, and to achieve this I had to create a "awaiting copy" flag, to be checked in the "stop" event.
解决方案是等待“停止”事件完成,为此我必须创建一个“等待复制”标志,以在“停止”事件中进行检查。
It still doesn't feel right (UX-wise) but it works correct, and you could always set revert to false on the sortable function to get a slightly better feel.
它仍然感觉不正确(UX 方面)但它工作正常,并且您始终可以在 sortable 函数上将 revert 设置为 false 以获得稍微好一点的感觉。
The code from the example is as follows...
示例中的代码如下...
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 = $("<div class='Item'>Item " + itemCount + "</div>");
$("#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();
}
Anyway, hopefully this will help others who want the same kind of effect... no stealing my design though ;)
无论如何,希望这会帮助其他想要相同效果的人......不过不要窃取我的设计;)