拖放表格单元格内容答案

【问题标题】：Drag and Drop table cell contents拖放表格单元格内容
【发布时间】：2014-05-05 20:57:59
【问题描述】：

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

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

【问题讨论】：

你可能想读这个：html5rocks.com/en/tutorials/dnd/basics
感谢您对GCyrillus的支持，意思是像事件日历:)
有点，你可以从一张桌子，轻松地做这样的事情：codepen.io/gcyrillus/pen/HdpAI

标签： jquery html

【解决方案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 中，您可以看到带有两个跨度标记的效果。
在这种情况下，如果单元格中有跨度，则放置事件不起作用

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

这种方法很好，但在我的情况下不起作用。因为我的跨度是动态追加的
@user3598780 : 动态如何？
点赞事件日历事件

【解决方案3】：

如果你使用 jQuery，你也可以试试 jQuery UI 库。跨度应该是可拖动的http://jqueryui.com/draggable/，单元格应该是可放置的http://jqueryui.com/droppable/

【讨论】：