我正在使用 JQuery 1.5.1 和 JQuery UI 1.8.11。
我已经为一些项目添加了 sortable - 这里的任务是允许拖动排序,这一切都很好。
但我还想合并 droppable,这样项目就可以放到“复制我”区域 - 那里的任务将是复制项目(我稍后会解决这个问题)
问题是可放置的目标位于可排序列表的底部(我不想移动它)并且一旦发生放置,可排序的项目就会移动到列表的底部。
我想做的是在 drop 事件触发时取消这种排序。
You can see my problem in action here (只需将“Item 1”拖到“Drop to Copy Item”区域,您会看到排序没有被取消)
如您所见,我已经在可放置的“drop”事件中尝试了以下操作(从 JQuery UI 文档中建议),但它似乎不起作用...
$(this).sortable('cancel');
我也愿意接受有关如何实现我正在寻找的这种“拖放复制”效果的任何其他建议。
谢谢
最佳答案
好的,所以我已经制定了一个解决方案来完成这项工作。
如果您在 sortable 函数的“停止”事件中使用取消代码,它确实有效。但是,它仅在“还原”完成后才适用。问题是我试图从可放置的“drop”事件中复制/恢复元素,但这还为时过早。
解决方案是等待“停止”事件完成,为此我必须创建一个“等待复制”标志,以在“停止”事件中进行检查。
它仍然感觉不对(在用户体验方面),但它工作正常,并且您始终可以在 sortable 函数上将 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 = $("<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();
}
无论如何,希望这能帮助其他想要相同效果的人...不过不要盗用我的设计 ;)
关于javascript - JQuery 用户界面 : Cancel Sortable upon Droppable Drop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7834199/