[英]Element disapears after detach() and appendTo()
我正在使用hQuery的可拖动“&”droppable“。当我删除一个元素时,我想将它从之前的父节点移动到它已删除的父节点。
但当我分离并附加它时,它就会消失! 为什么?
如果我在拖动的元素上执行console.log
,我可以看到它已经更改了父项。
小提琴
https://jsfiddle.net/0apuqnxd/6/
JS
//Make elements Draggable
$('.elementsDiv').draggable({
revert: 'invalid',
});
$('.flakUp, .flakDown').droppable({
accept: '.elementsDiv',
drop: function(event, ui) {
//Get dragged Element (checked)
draggedElement = $(ui.draggable);
//Get dropZone where element is dropped (checked)
dropZone = $(event.target);
//Remove element from DOM (prev parent)
$(draggedElement).detach();
//Append element to DOM (new parent)
$(draggedElement).appendTo(dropZone);
},
});
更新后的
https://jsfiddle.net/0apuqnxd/13/
这是为了演示丢弃的元素我们没有附加到dropZone,而只是文档...
看来坐标是错误的。
当放置一个项目时,它比放置的坐标更好地放在上部坐标上。
$('.flakUp, .flakDown').droppable({
accept: '.elementsDiv',
drop: function(event, ui) {
console.log(event);
console.log(ui.offset.top);
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
var offset = $(this).offset();
console.log(offset);
var relX = event.pageX - offset.left;
var relY = event.pageY - offset.top;
draggable.css({"left": ui.offset.left, "top": ui.offset.top, "position": "absolute"}).appendTo(droppable);
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.