Javascript 交换一个&x27；td'；在表之间拖动时使用另一个元素

我正在制作一个UI，其中有两个表，它们位于不同的

div

。 我想在执行拖动功能时，将一个表中的一个

td

元素与另一个表中的另一个元素交换

我尝试过一些库，比如kento和JQuerySortable，但没有成功

您能告诉我如何使用纯JavaScript或一些库来实现它吗

以下是一个表的HTML代码：

英语
英语
印地语
印地语
数学
数学
物理学
物理学
1.
2.
3.
4.
午餐
5.
6.
7.
8.
星期一
英格
印地语
数学
英格
印地语
数学
英格
印地语
数学

实际上，代码中只有一个表。尝试在当前HTML中添加以下代码作为启动程序，然后继续。使用此选项，您只能并行移动

。只需使用这个拖动和开发的想法。最好有两个单独的表来满足您的要求

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jqueryUi.js"></script>

$(document).ready(function () {

$("td").draggable({ containment: 'parent'}).resizable();

});

$（文档）.ready（函数（）{
$（“td”）.draggable（{containment:'parent'}）.resizeable（）；
});

试试这个……但颜色没有被复制……需要对此进行一些分析……试试并告诉我：）

$（文档）.ready（函数（）{
$（“.dool div”）.draggable（{containment:'#cool'}）；
$（“#cool div”）.draggable（{containment:'.fool'}）；
$（“#酷”）。可拖放({
drop：函数（事件、用户界面）{
log（event.target.outerHTML）；
$（“#push”）.append（“”+event.toElement.firstChild.parentElement.outerHTML+“”）；
ui.draggable.remove（）；
$（“#push div”）.removeAttr（'style'）；
//$（“#cool div”）.not（“.copied”）.remove（）；
}
});
});
英语
英语
印地语
印地语
数学
数学
物理学
物理学

实际上有两个表，一个表是在名为“cool”的“div”中动态形成的。我获取了一些数据，并用动态生成后获得的表数据编辑了该“div”。请看一下该div是可拖动的，在拖动它时被删除了，但它没有执行交换，它只是坐在元素上方。我添加了应用代码后我的ui的图片

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jqueryUi.js"></script>

<script type="text/javascript">

$(document).ready(function () {

$(".fool div").draggable({ containment: '#cool'});

$("#cool div").draggable({ containment: '.fool'});
$("#cool").droppable({
            drop: function(event, ui) {
               console.log(event.target.outerHTML);

               $("#pushed").append('<tr class="copied"><td>'+event.toElement.firstChild.parentElement.outerHTML+'</td></tr>');
               ui.draggable.remove();
               $("#pushed div").removeAttr( 'style' );
               //$("#cool div").not(".copied").remove();
            }
        });


});
</script>

<div id="jumbo">
  <div class="fool">
    <table>
      <tr>
        <td>
          <div class="item" style="background-color:blue">english</div>
        </td>
        <td>
          <div class="item" style="background-color:blue">english</div>
        </td>
      </tr>
      <tr>
        <td>
          <div style="background-color:yellow" class="item">hindi</div>
        </td>
        <td>
          <div style="background-color:yellow" class="item">hindi</div>
        </td>
      </tr>
      <tr>
        <td>
          <div style="background-color:red" class="item">maths</div>
        </td>
        <td>
          <div style="background-color:red" class="item">maths</div>
        </td>
      </tr>
      <tr>
        <td>
          <div style="background-color:grey" class="item">physics</div>
        </td>
        <td>
          <div style="background-color:grey" class="item">physics</div>
        </td>
      </tr>
    </table>
  </div>
  <div id="cool" style="background-color: aquamarine;width: 106px;height: 136px;" >
  <table id="pushed">

  </table>
  </div>
</div>