Javascript Html5在表格单元格之间和单元格内拖动项目

我使用Html5 DragTable将项目拖动到不同的表格单元格中：

第1栏
第2栏
第3栏
项目1
项目2
项目3
$（文档）.ready（函数（）{
$（'.event'）。打开（“dragstart”，函数（事件）{
var dt=event.originalEvent.dataTransfer；
dt.setData（'Text'，$（this.attr（'id'））；
});
$（'table td'）.on（“dragenter dragover drop”，函数（事件）{
event.preventDefault（）；
如果（event.type=='drop'）{
var data=event.originalEvent.dataTransfer.getData（'Text'，$（this.attr（'id'））；
de=$（'#'+数据）.detach（）；
de.appendTo（$（本））；
};
});
})

这种方法唯一的问题是，如果将“Item 1”拖到“Item 2”和“Item 3”所在的单元格中，则会将Item 1追加到末尾

---

如何修改此项，以便在“项目2”之前或“项目2”与“项目3”之间添加“项目1”。我试着从嵌套拖拽物的兔子洞里钻下去，但很快就放弃了，希望有更简单的方法

读了你的评论后，我做了一些修改。现在它像一个魅力。我会推荐阅读

---

我叉起小提琴，稍微调整了一下代码：

我所做的是检查项目是否直接放入td中，在这种情况下，删除的元素将在所有其他条目之后插入，或者如果它被放到另一个项目的顶部，在这种情况下，项目是在删除项目之前插入的

在td中添加一些填充，可以更轻松地将项目直接放入td，即使其中已经有3个项目

table th, table td {
    width: 200px;
    height:70px;
    padding: 5px;
}
table span {
    display:block;
    background-color: #ccc;
    border: 1px solid black;
    color: fff;
    height: 30px;
    width: 100%;
}

---

您可以在de中选择

第2项

或

第3项

，然后在功能之前使用

，或者在

功能之后使用

，您可以告诉我如何操作吗？我将您的代码放入我创建的JFIDLE中，但它不起作用，所有拖动都不起作用。请看“现在检查”，它将工作。。。我已经编辑了我的答案。谢谢，好多了，虽然在第2列中，我不能将第2项拖到第3项之后。将项目3拖到项目2之前是可行的，因为我的代码只是一个示例，您可以在此基础上进行构建。这只是为了让你知道拖放是如何工作的。我建议不要使用jquery来执行此操作。使用本机JS，它更容易混淆。：）虽然这个答案可能是正确和有用的，但如果您在答案中包含一些解释，以解释它如何帮助解决问题，则更可取。如果将来有变化（可能无关），这将变得特别有用这会导致它停止工作，用户需要了解它曾经是如何工作的。我已经将其放入JSFIDLE at中，但所有的拖放操作都不起作用。如果要拖放到的单元格上已经有一个span，是否有方法返回其原始单元格上的span？
 $(document).ready(function () {
    $(".event").on("dragstart",function(event){
        var dt = event.originalEvent.dataTransfer;
        var node = event.target;

        dt.setData('text/html', node.innerHTML);
        dt.setData('text/plain',node.id);
        event.stopPropagation();
    });
    $(".event").on("dragend",function(e){
        event.preventDefault();event.stopPropagation();
    })

    $(".row>td").on("dragenter dragover dragleave",function(e){
                event.preventDefault();event.stopPropagation();
    })
    $(".row > td").on("drop",function(event){
       var dragObjId = event.originalEvent.dataTransfer.getData("text/plain");
        var data = $("#"+dragObjId);
        var dropTarget = $(event.target).closest("td");
        $(dropTarget).prepend(data);
    });
})

$(document).ready(function() {
    $(".event").on("dragstart", function(event) {
        var dt = event.originalEvent.dataTransfer;
        var node = event.target;
        dt.setData('text/html', node.innerHTML);
        dt.setData('text/plain', node.id);
        event.stopPropagation();
    });
    $(".event").on("dragend", function(e) {
        event.preventDefault();
        event.stopPropagation();
    }) $(".row>td").on("dragenter dragover dragleave", function(e) {
        event.preventDefault();
        event.stopPropagation();
    }) $(".row > td").on("drop", functiwww.ta3roof.com / on(event) {
        var dragObjId = event.originalEvent.dataTransfer.getData("text/plain");
        var data = $("#" + dragObjId);
        var dropTarget = $(event.target).closest("td");
        $(dropTarget).prepend(data);
    });
})

$(document).ready(function () {
    $('.event').on("dragstart", function (event) {
        var dt = event.originalEvent.dataTransfer;
        dt.setData('Text', $(this).attr('id'));
    });
    $('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();
            if (event.originalEvent.target.tagName === "SPAN") { 
                de.insertBefore($(event.originalEvent.target));
            }
            else {
                 de.appendTo($(this));
            }
        };
    });
})

table th, table td {
    width: 200px;
    height:70px;
    padding: 5px;
}
table span {
    display:block;
    background-color: #ccc;
    border: 1px solid black;
    color: fff;
    height: 30px;
    width: 100%;
}