如何使用放入的父 ID 更新 jQuery 可拖动项的 class？

Question

我这里有一个fiddle：https://jsfiddle.net/radmktryan/qfghjnm6/

我的代码：

HTML

<table id="#our_table" class="table table-striped">
    <tr>
    <th>Stage 1</th>
    <th>Stage 2</th>
    <th>Stage 3</th>
    </tr>
    <tr>
    <td id="stage1" data-uid="stage1">
        <span class="event" id="a" draggable="true">aaa</span>
        <span class="event" id="b" draggable="true">bbb</span>
    </td>
    <td id="stage2" data-uid="stage2">
        <span class="event" id="c" draggable="true">ccc</span>
        <span class="event" id="d" draggable="true">ddd</span>
    </td>
    <td id="stage3" data-uid="stage3">
        <span class="event" id="e" draggable="true">eee</span>
        <span class="event" id="f" draggable="true">fff</span>
    </td>
    </tr>
</table>

JS

$(document).ready(function(){
    $('.event').on("dragstart", function (event) {
        var dt = event.originalEvent.dataTransfer;
        dt.setData('Text', $(this).attr('id'));
    });
    $('.event').on("drop", function (event) {
        var parentStage = $(this).parent().attr('id');
        $(this).addClass(parentStage);
        console.log(parentStage);

    });
    $('table td').on("dragenter dragover drop", function (event) {  
        event.preventDefault();
        if (event.type === 'drop') {
            var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
            de=$('#'+data).detach();
            de.appendTo($(this));   
        };
    });
})

我想要完成的任务：我想将 class 项（'span'）的 'dropped' 更新到另一个 table 单元格中.要更改的 class 应该继承自其父 table 单元格。

我能够提取正确的 ID，但是，它 'class' 被分配给了错误的跨度项。

我猜我的代码在 'drop' 部分是错误的。

提前致谢！

Answer 1

当 drop 事件在 span 元素之一上触发时，您试图将 class 添加到该元素。这样做时，您实际上是将父元素的 id 添加到要放置可拖动元素的 span 元素。

应该删除 .event 元素的 drop 事件侦听器：

$('.event').on("drop", function (event) {
  // ...
  // I removed this event listener since you never intended
  // to drop span elements inside of other span elements.
});

或者您可以将 drop 事件侦听器更改为 dragend 事件侦听器（这可能是您最初的意图）。

Updated Example

$('.event').on("dragend", function (event) {
    var parentStage = $(this).parent().attr('id');
    $(this).addClass(parentStage);
});

但是，当 class 附加到 drop 事件触发的 td 元素时，您也可以只将 class 添加到该元素。这样做，您不需要 dragend.

的另一个事件侦听器

Updated Example

$('table td').on("dragenter dragover drop", function (event) {
    event.preventDefault();

    if (event.type === 'drop') {
        var id = event.originalEvent.dataTransfer.getData('Text', this.id);
        var $draggable = $('#' + id).detach();
        $draggable.appendTo(this);
        $draggable.addClass(this.id);
    };
});

如何使用放入的父 ID 更新 jQuery 可拖动项的 class？

How do I update the class of a jQuery Draggable Item with the Parent ID that it's dropped into?

jquery

drag-and-drop

addclass