Draggable jquery get start parent () element

Question

I want to drag elements with humor.

Now I have a "repository" with several elements.

On another site, I have x mailboxes. each box can contain only 1 item.

I am currently using the droppable function to set another class in a field, so that you can add only 1 field that works:

$( ".droppable" ).droppable({ accept: ".draggable", activeClass: "draghover", drop: function( event, ui ) { if($( this ).hasClass("droppable")) { $( this ).removeClass("droppable").addClass( "droppable-"); } } }); 

Now I need to return the class when I move the item to the repository or to another. I tried this with the draggable.start function, but I cannot get the correct parent ()

 $( ".draggable" ).draggable({ revert: "invalid", snap: ".droppable", snapMode: "inner", start: function( event, ui ) { alert($( this ).parent().attr("Class")); } }); 

this will return the initial position all the time before the first drag. Not the last position.

Storage is as follows:

 <td valign="top" class="warenlager" bgcolor="grey" width="200"> <div class="draggable" class="bild ui-widget-content" id="s73-1">S</div> <div class="draggable" class="bild ui-widget-content" id="s74-1">S</div> </td> 

The box looks like this:

 <td><div class="droppable" id="element 2"></div></td> 

Hello

Answer 1

If you want to return the field class after removing the drag and drop item from droppable (which I think you are asking), use the out event handler, so now the code will look something like this:

  $( ".droppable" ).droppable({ accept: ".draggable", activeClass: "draghover", drop: function( event, ui ) { if($( this ).hasClass("droppable")) { $( this ).removeClass("droppable").addClass( "droppable-"); } }, out: function() { $(this).addClass("droppable").removeClass( "droppable-"); } }); 

Hope this helps :)

Answer 2

You can do it like this ( from ES6 ):

Online Demo (jsfiddle)

 // Create a class for dragged element // I will create a new instance form this class when drag function draggedElement(elementId, parentId) { this.id = elementId, this.parentId = parentId }; // Array of dragged elements // This array use for store dragged elements and their parent id var draggedElementList = []; $('.draggable').draggable({ start: function(event, ui) { // Store or update parent id updateDraggedElementList($(this).attr("id"), $(this).parent().attr("id")); } }); // This method used for update or store draaged elemens and their parent id function updateDraggedElementList(elementId, parentId) { // Create new instance var element = new draggedElement(elementId, parentId); // Check element has already been added or not var foundIndex = draggedElementList.findIndex(el => el.id == element.id); if (foundIndex > -1) draggedElementList[foundIndex] = element; else draggedElementList.push(element); // Print dragged elements and their parents printDraggedElements(); } // I wrote this method for test function printDraggedElements() { for (var i = 0; i < draggedElementList.length; i++) { console.log(draggedElementList[i].id); console.log(draggedElementList[i].parentId); } } 

Answer 3

I know that this is not the last, however, one way to get the parent of the dragged item is to use the start event when dragging.

 $( ".draggable" ).draggable({ revert: "invalid", snap: ".droppable", snapMode: "inner", start: function( event, ui ) { alert(event.currentTarget.parentElement); } });