从拖动元素中获取父数据元素 - 拖放功能

Question

我正在尝试在JavaScript中检索拖动对象的父数据属性"data-date"。 因此，我想从

“drag me”

被拖出的位置接收data-date属性<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>

我可以获取被删除的data-date属性，但无法弄清如何获取被拖动的data-date属性。

当前的JS“从”和“到”代码

       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

- Crezzur

Answer 1

我已经找到了一个解决方法，可以从可拖动函数传递信息到放置函数。

在下面的示例中，我首先从可拖动函数中获取父元素的data-date值。在检索此数据后，我们将该值从可拖动函数传递到放置函数。

我们将变量命名为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);
    }
 });

- Crezzur

Answer 2

有几种方法可以处理它

1. 我更喜欢在开始拖动时将初始父元素保存到某个变量中。

2. 另一个选项是在拖动的元素本身上拥有所有所需的数据。

- qiAlex