从被拖动的元素中获取父数据元素 - 拖放功能答案

【问题标题】：Get parent data element from dragged element - Drag en drop function从被拖动的元素中获取父数据元素 - 拖放功能
【发布时间】：2022-04-11 16:00:09
【问题描述】：

我正在尝试在 JavaScript 中检索被拖动对象的父数据属性 data-date。所以我想从div“拖我”被拖出的地方接收数据日期属性<td>。

HTML 示例：

<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>

我能够检索拖放的数据日期属性，但不知道如何检索从数据日期属性中拖出的属性。

JS From 和 TO 当前代码

       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

【问题讨论】：

标签： javascript drag-and-drop element custom-data-attribute

【解决方案1】：

我找到了一种解决方法，可以将信息从 draggable 函数传递到 droppable 函数

在下面的示例中，我首先从可拖动函数中的父元素获取数据日期值。检索到这些数据后，我们将值从可拖动函数传递给可放置函数。

我们将变量命名为oldDate，这样我们就可以通过调用“ui.draggable.data('oldDate')”在可放置函数中访问它。下面我为大家提供一个示例代码。

可拖动功能：

$(".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
    }
});

可拖放功能：

 $("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);
    }
 });

【讨论】：

【解决方案2】：

管理它的方法很少

我更喜欢在开始拖动时将初始父元素保存到某个变量中。
另一种选择是将所有需要的数据放在被拖动的元素本身上

【讨论】：