Question

我有一个小提琴：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));   
        };
    });
})

我想要完成的任务：我想在将某个项目的类别“放入”另一个表格单元格时更新该项目的类别（即“跨度”）。要更改的类应该从它的父表单元格继承。

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

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

提前致谢！

Answer 1

当您在drop个元素之一上触发span事件时，您试图将该类添加到元素中。在这样做时，您实际上是将父元素的id添加到您正在删除可拖动元素的span元素上。

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

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

但是，当元素被附加到触发td事件的drop元素时，您也可以将该类添加到元素中。这样做，您不需要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 Draggable项的类？

1 个答案: