我正在将一个对象拖到一个可拖放的对象中,该对象也是一个可拖动对象。放置对象后,它嵌套在可放置对象中。同样,如果我将对象拖到 droppable 之外,它就不再嵌套。
但是,如果我经常拖入和拖出可放置对象,则可拖动对象最终会位于不同的位置。
代码位于http://jsfiddle.net/sandeepy02/kTAL3/41/
您可以通过创建对象“房间”并将“表格”拖入其中来复制问题。然后移动“房间”,“桌子”随之移动。但是,如果您将“桌子”拖出房间,然后拖入并拖出“桌子”,它会突然重新定位。
编辑 为了澄清我用来将拖动的项目附加到可放置项的代码是:
.droppable({
drop: function(event, ui) {
$(this).append(ui.draggable);
},
out: function(event, ui) {
$("#boundaryContainer").append(ui.draggable);
}
我尝试了各种方法来在插入和退出之前保存可拖动的位置,但它们没有奏效。方法是:方法1:
.droppable({
drop: function(event, ui) {
var position = ui.draggable.offset();
ui.draggable.appendTo($(this)).css(position);
},
out: function(event, ui) {
var position = ui.draggable.offset();
ui.draggable.appendTo("#boundaryContainer").css(position);
}
方法二:
.droppable({
drop: function(event, ui) {
var tempLeft= ui.draggable.position().left;
var tempRight= ui.draggable.position().right;
$(this).append(ui.draggable);
ui.draggable.position().left = tempLeft;
ui.draggable.position().right= tempRight;
},
out: function(event, ui) {
var tempLeft= ui.draggable.position().left;
var tempRight= ui.draggable.position().right;
$("#boundaryContainer").append(ui.draggable);
ui.draggable.position().left = tempLeft;
ui.draggable.position().right= tempRight;
}
方法 3 :(