好的,所以我已经制定了一个可以完成这项工作的解决方案。
如果您将取消代码放在可排序函数的“停止”事件中,则取消代码确实有效。但是,它仅在“恢复”完成后才适用。问题是我试图从可放置的“drop”事件中复制/恢复元素,但这还为时过早。
解决方案是等待“停止”事件完成,为了实现这一点,我必须创建一个“等待复制”标志,以便在“停止”事件中进行检查。
这是一个例子 http://jsfiddle.net/musefan/6BW7A/34/
它仍然感觉不对(用户体验方面),但它工作正常,并且您始终可以在可排序函数上将恢复设置为 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();
}
不管怎样,希望这能帮助其他想要同样效果的人……不过不要窃取我的设计;)