我的问题是获取掉落元素的位置
我在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
drop函数中使用它来将元素移动到被删除的位置。
这是我的问题开始的地方!
在控制台我得到:没有定义Stoppos。
我想dropraable-drop在draggable-stop之前执行了?!
我该如何解决这个问题? 我需要创建一个克隆,因为索引问题。因此我还需要删除/附加元素。
答案 0 :(得分:0)
我建议使用传递的函数的属性。
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();
}
});
});
在此方法中,两者都可以访问变量。如果您只在函数内部定义它,则其他函数无法访问它。