Currently, I am utilizing hQuery's draggable and droppable features. My goal is to move an element from its original parent to its new dropped parent after dragging it.
However, when I detach and append the element, it seems to disappear! What could be causing this issue?
Upon conducting a console.log on the dragged element, it confirms that the element has indeed changed parents.
Check out my FIDDLE:
https://jsfiddle.net/0apuqnxd/6/
Here is the JS code snippet:
//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);
},
});
Check out the UPDATED FIDDLE for more clarity:
https://jsfiddle.net/0apuqnxd/13/
This updated version aims to showcase that the dropped element is not attached to the dropZone as intended, but rather only to the document...