当您将可放置对象放置在放置目标中后稍微移动它并且它失去了可拖动性时,这是因为
$this.html("");
在放置处理程序中,可拖动对象仍然位于放置目标内。当您删除放置目标的 HTML 时,您还会删除应该重新附加的元素。这会返回一个语法错误,因为该元素不再存在,这会中断操作,使克隆留在那里并且可拖动对象被删除。
这是一个快速修复:
drop: function(event, ui) {
var $this = $(this);
if ($this.find('.ui-draggable').length) return; //don't overwrite occupied spot
$this.empty(); //empty() sounds more semantic than html('') for me, it does the same thing =]
$this.append(ui.draggable);
//...
}
Fiddle http://jsfiddle.net/CVbzg/6/
它不允许用另一个元素覆盖放置目标内的放置元素,其中包括在其自己的放置目标上重新放置元素。
另一种解决方案是在附加正在放置的可拖动对象之前将已放置的可拖动对象移回其起始位置:
drop: function(event, ui) {
var $this = $(this),
containsDropped = $this.find('.ui-draggable');
if (containsDropped.length) containsDropped.appendTo(containsDropped.data('originalParent'));
$this.empty();
Fiddle http://jsfiddle.net/CVbzg/8/
您只需要注意不要无意中删除可拖动对象。=]