[英]Element disapears after detach() and appendTo()
I'm using hQuery's draggable" & "droppable". When I drop an element I want to move it from its previous parent to its dropped parent. 我正在使用hQuery的可拖动“&”droppable“。当我删除一个元素时,我想将它从之前的父节点移动到它已删除的父节点。
But when I detach and append it, it disappears! 但当我分离并附加它时,它就会消失! Why? 为什么?
If I do a console.log
on the dragged element, I can see that it has changed parents. 如果我在拖动的元素上执行console.log
,我可以看到它已经更改了父项。
FIDDLE 小提琴
https://jsfiddle.net/0apuqnxd/6/ https://jsfiddle.net/0apuqnxd/6/
JS 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);
},
});
UPDATED FIDDLE 更新后的
https://jsfiddle.net/0apuqnxd/13/ https://jsfiddle.net/0apuqnxd/13/
This is to demonstrate that the dropped element us not attched to dropZone, but only to the document... 这是为了演示丢弃的元素我们没有附加到dropZone,而只是文档...
It seems that coordinate is wrong. 看来坐标是错误的。
When drop a item, it is placed on upper coordinate better than dropped coordinate. 当放置一个项目时,它比放置的坐标更好地放在上部坐标上。
$('.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);
},
});
https://jsfiddle.net/ChaHyukIm/0apuqnxd/12/ https://jsfiddle.net/ChaHyukIm/0apuqnxd/12/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.