我的问题是获取放置元素的位置。
我在stop:
上使用.draggable
选项来获取新职位。
$('.elementsDiv').draggable({
revert: 'invalid', //Revert when drop fails
helper: 'clone', //Drag a clone
stop: function() {
//Dropped position.
Stoppos = $(this).position();
}
});
拖动时,我想从其父元素中删除该元素,并将其附加到它的新父元素中。
我用
.droppable
$('.flakUp, .flakDown').droppable({
accept: '.elementsDiv',
drop: function (event, ui) {
//get dragged element
var draggedElement = $(ui.draggable);
//get dropZone
var dropZone = $(this);
//Remove element from list and append it to dropZone
draggedElement.detach().appendTo(dropZone.position(Stoppos));
//Make element draggable
draggedElement.draggable();
}
});
当我删除/追加时,新位置将在左上方。
因此,我必须从
.draggable
获取放置位置,并在.droppable
放置函数中使用它来将元素移动到放置位置。这是我的问题开始的地方!
在控制台中,我得到:未定义Stoppos。
我猜droppable-drop在draggable-stop之前执行?
我该如何解决?
由于索引问题,我需要创建一个克隆。因此,我还需要删除/添加元素。
最佳答案
我建议使用传递的函数的属性。
var stopPos = {};
var stopOff = {};
$('.elementsDiv').draggable({
revert: 'invalid', //Revert when drop fails
helper: 'clone', //Drag a clone
stop: function(e, ui) {
stopPos = ui.position;
stopOff = ui.offest;
console.log(stopPos, stopOff);
}
});
这将为您提供辅助对象的位置和偏移量,作为
{top, left}
对象。在将辅助程序附加到可放置对象中时,可以稍后使用它们。$('.flakUp, .flakDown').droppable({
accept: '.elementsDiv',
drop: function (event, ui) {
var draggedElement = $(ui.draggable);
var dropZone = $(this);
//Remove element from list and append it to dropZone
draggedElement.detach().appendTo(dropZone.position(stopPos));
//Make element draggable
draggedElement.draggable();
}
});
因此,您的代码没有任何外在错误,但要注意的一点是,函数外部的变量
stopPos
和stopOff
的定义。最后应该看起来像: $(function(){
var stopPos = {};
var stopOff = {};
$('.elementsDiv').draggable({
revert: 'invalid', //Revert when drop fails
helper: 'clone', //Drag a clone
stop: function(e, ui) {
stopPos = ui.position;
stopOff = ui.offest;
console.log(stopPos, stopOff);
}
});
$('.flakUp, .flakDown').droppable({
accept: '.elementsDiv',
drop: function (event, ui) {
var draggedElement = $(ui.draggable);
var dropZone = $(this);
//Remove element from list and append it to dropZone
draggedElement.detach().appendTo(dropZone.position(stopPos));
//Make element draggable
draggedElement.draggable();
}
});
});
在这种方法中,两个变量都可以访问。如果仅在函数内部定义它,则其他函数将无法访问它。