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

Html5 dragging items across and within table cells

本文关键字：单元格 拖动 项目 之间 表格 Html5      更新时间：2023-09-26

我正在使用Html5 draggable将项目拖放到不同的表格单元格中:

http://jsfiddle.net/d1wnk1bg/6/

<table border="1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td><span class="event" id="item1" draggable="true">Item 1</span>
        </td>
        <td><span class="event" id="item2" draggable="true">Item 2</span>
            <span class="event" id="item3" draggable="true">Item 3</span>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
$(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();
         de.appendTo($(this));  
       };
   });
})

这种方法的唯一问题是，如果您将'Item 1'拖到'Item 2'和'Item 3'所在的单元格中，Item 1被附加到末尾。

我如何修改这一点，使'Item 1'可以添加在'Item 2'之前或'Item 2'和'Item 3'之间?我试着进入嵌套拖拽的兔子洞，但很快就放弃了，希望有一个更简单的方法!

我fork了Fiddle并稍微调整了一下代码:

http://jsfiddle.net/gL88q17m/1/

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

我所做的是检查项是否被直接放入到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%;
}

看了你的评论后，我做了一些改变。现在，它正发挥着神奇的作用。我推荐你读这本书。

 $(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);
    });
})
相关文章：