Получить отдельный элемент данных из перетаскиваемого элемента - функция Drag en drop - PullRequest
Новая
       22

Получить отдельный элемент данных из перетаскиваемого элемента - функция Drag en drop

3 голосов
/ 18 марта 2020

Я пытаюсь получить родительский атрибут данных (дата-дата) перетаскиваемого объекта в JavaScript. Поэтому я хочу получить атрибут data-date (TD), откуда был перетащен div "drag me".

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 От и до текущего кода 

       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

Пример живого CodePen:

Codepen

Ответы [ 2 ]

0 голосов
/ 18 марта 2020

Я нашел способ передать информацию из функции draggable в droppable function

В следующем примере я сначала получаю значение даты-даты из родительский элемент в перетаскиваемой функции. После извлечения этих данных мы передаем значение из перетаскиваемого объекта в функцию сброса.

Мы называем переменную 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);
    }
 });
0 голосов
/ 18 марта 2020

Есть несколько способов, как управлять этим

  1. Я бы предпочел сохранить исходный родительский элемент в некоторую переменную при начале перетаскивания.

  2. Другой вариант может иметь все необходимые данные о самом перетаскиваемом элементе

...