Javascript 使用Jquery和<；从html表拖放多行；thead>；标签

JSFIDLE中有两个表，我想在它们之间交换行

。我希望能够用Jquery做到这一点，但是现在，由于

标记，它不起作用。我认为它与

选择器

中的

项

有关，但我不知道该将其更改为什么，以便它忽略

。我想知道如何编辑代码，这样它就可以使除了

标记之外的所有内容都可以拖动和重新排列

---

在当前的JSFIDLE中，删除

标记将起作用，但是我需要

标记在那里

请修复您的HTML代码。你必须把“thead”标签从“tbody”上去掉 它会起作用的。还有一件事，您不需要将droppable与sortable一起使用，请删除它。工作版本

可乐
可乐
可乐
可乐
156
668
100.95
1.82
256
668
100.95
1.82
可乐
可乐
可乐
可乐
356
668
100.95
1.82
456
668
100.95
1.82

为什么当我从一个表中拖动所有tr时，我不能将元素放回那个空表中？有没有办法解决这个问题？为什么不能将元素放在可排序区域上是因为区域不可见。我建议使用“div”或“ul”标签。你必须为它们设置宽度和高度，以防它们没有任何子元素。嗯……问题是我需要使用tr和td。真的没有办法吗？如果tbody无法调整，我们可以选择其他空间作为可排序区域吗？您可以创建另一个可排序区域，例如隐藏div。当您的tbody为空时，显示div。在停止事件中，将拖动的项目移动到tbody。我已在此处发布了类似问题的答案，请查看，希望有帮助。它有完整的代码和演示

            <table id='table-draggable1'>  
            <thead>
                <tr>
                    <th>col1</th>
                    <th>col2</th>  
                    <th>col3</th>  
                    <th>col4</th>  
                </tr>
                </thead>
            <tbody class="connectedSortable"> 
                <tr>   
                    <td>156</td>                                                                                         
                    <td>668</td>                                                              
                    <td>100.95</td>  
                    <td>1.82</td>                                                                  
                </tr>  
                <tr>  
                    <td>256</td>                                                                                         
                    <td>668</td>                                                              
                    <td>100.95</td> 
                    <td>1.82</td>                                                                
                </tr>  
            </tbody> 
        </table>
        <table id='table-draggable2'>  
            <thead>
                <tr>
                    <th>COL1</th>  
                    <th>COL2</th>  
                    <th>COL3</th>  
                    <th>COL4</th>  
                </tr>
                </thead>
            <tbody class="connectedSortable">
                <tr>   
                    <td>356</td>                                                                                         
                    <td>668</td>                                                              
                    <td>100.95</td>  
                    <td>1.82</td>                                                                  
                </tr>  
                <tr>  
                    <td>456</td>                                                                                         
                    <td>668</td>                                                              
                    <td>100.95</td> 
                    <td>1.82</td>                                                                
                </tr>  
            </tbody> 
        </table>