Get parent data element from dragged element - Drag en drop function

user_3877838 0
Viewed 507

I am trying to retrieve a parent data attribute data-date of the dragged object in JavaScript. So i want to receive the data-date attribute <td> from where the div "drag me" was dragged from.

HTML example:

<td data-date="2/3/2020">
<div>drag me</div>
</td>

<td data-date="3/3/2020">
<-- DIV "Drag Me" will be dragged to this location --!>
</td>

I am able to retrieve the dropped data-date attribute, but cant figure out how to retrieve the dragged from data-date attribute.

JS From and TO current code

       dropped = ui.draggable,
       newDate = $(this).data('date'),
       console.log('Date From :' + dropped.data('date')); // needs to be found
       console.log('Date To:' + newDate); // Works correctly
custom-data-attribute element drag-and-drop javascript
2 Answers

I have found a work around to pass information from the draggable function to droppable function

In the example below i first get the data-date value from the parent element in the draggable function. After retrieving this data we pass the value from draggable to the droppable function.

We name de variable oldDate so we can access it in the droppable function by calling "ui.draggable.data('oldDate')". Ill provide an example code for you guys below.

Draggable function:

$(".drag").draggable({
    cursor: "crosshair",
    revert: "invalid",
    start: function(event, ui) {
        var oldDate = $(this).parent().data('date'); // get value from parent data-date attribute
        $(this).data('oldDate', oldDate); // pass variable to droppable function
    }
});

Droppable function:

 $("td[data-date]").droppable({
    accept: ".drag", 
    activeClass: "over",
    drop: function(event, ui) {
        var displayOldDate = ui.draggable.data('oldDate'); // access the variable saved in draggable function 
        console.log('Dragged from: ' + displayOldDate);
    }
 });
user_38778380

there are few ways how to manage it

  1. I better prefer to save an initial parent element into some variable when start dragging.

  2. Another option could be have all the needed data on the dragged element itself

user_81315790
Related