我在这里有一个小提琴：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，但是，它的“类”被分配给错误的跨度项目。
我猜想我的代码在“删除”部分时是错误的。
提前致谢！
您正在尝试在元素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事件侦听器（这可能首先就是您想要的）。
$('.event').on("dragend", function (event) {
var parentStage = $(this).parent().attr('id');
$(this).addClass(parentStage);
});
但是，当将类添加到触发事件的元素中时，也可以将其添加到td元素中drop。这样，您就不需要使用其他事件监听器dragend。
$('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);
};
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句