jquery - 拖放表格单元格内容

Question

我这里有一个动态表。表数据也包括一个跨度。如何拖放跨越表格单元格之间的任何位置？

<table id="#our_table">
    <tr>
        <th>head1</th>
        <th>head1</th>
        <th>head1</th>
    </tr>
    <tr>
        <td><span id="event"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Answer 1

或者您只需使用这个简单的代码 ( Fiddle ) 拖放 html5

<script type="text/javascript">
$(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)); 
           };
       });
})
</script>

使用此代码，您还必须为您的 span 标签分配一个 id
在这个其他fiddle你可以看到两个 span 标签的效果。
在这种情况下，如果单元格中有一个 span，则 drop 事件不起作用