Question

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

<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));  

       };
   });
})

这种方法的唯一问题是，如果你拖动项目1＆＃39;进入第2项＆＃39;项目2＆＃39;和＆＃39;项目3＆＃39;是，第1项附加到结尾。

如何修改此项以便＆＃39;项目1＆＃39;可以在项目2＆＃39;之前添加或者在项目2＆＃39;之间和＆＃39;项目3＆＃39;。我试着沿着嵌套拖拉机的兔子洞走下去，但很快就放弃了，希望有更简单的方法！

Answer 1

我分叉了小提琴并调整了一下代码：

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中添加一些填充，即使内部已有3个项目，也可以更轻松地将项目直接拖放到td中。

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%;
}

Answer 2

我在阅读你的评论后做了一些修改。现在它的工作就像一个魅力。我会建议阅读this。

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

Answer 3

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

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

3 个答案: