拖放表格单元格内容 [英] Drag and Drop table cell contents

问题描述

我在这里有一个动态表.表数据还包括一个跨度.如何跨表单元格之间的任意位置拖放该跨度?

I have a Dynamic table here. Table data includes one span also. How can drag and drop that span anywhere among table's cells?

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

推荐答案

或者您只需将html5拖放到此简单代码中即可(

Or you just use drag drop html5 with this simple code (Fiddle)

<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
在其他小提琴中，您可以看到带有两个span标签的效果.
在这种情况下，单元格中有一个跨度，放置事件不起作用

with this code you must also assign an id to your span tag
in this other fiddle you can see the effect with two span tags.
In this case if there is a span in the cell the drop event does not work

这篇关于拖放表格单元格内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！