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

或者您只需使用拖放html5和这个简单的代码（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 在另一个fiddle中，你可以看到两个span标签的效果。
在这种情况下，如果单元格中有一个span，则drop事件不起作用

Answer 2

演示：http://jsfiddle.net/B93w9/

$(function() {
    $( "#our_table span" ).draggable();
    $( "#our_table td" ).droppable();
});

并重命名您的表格ID <table id="our_table">

Answer 3

如果您正在使用jQuery，您还可以尝试使用jQuery UI库。范围应该是可拖动的http://jqueryui.com/draggable/，而单元格应该是可放置的http://jqueryui.com/droppable/

拖放表格单元格内容

3 个答案: