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

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

Answer

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);
    }
 });