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

Question

我使用 Html5draggable 将项目拖动到不同的表格单元格中:

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 会附加到末尾。

如何修改此设置，以便可以将“项目 1”添加到“项目 2”之前或“项目 2”和“项目 3”之间。我尝试深入嵌套可拖动对象的兔子洞，但很快就放弃了，希望有一种更简单的方法!

Answer 1

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