将一个“td”元素替换为另一个表格之间的拖动

Question

我正在创建一个UI，其中我有两个表格，它们在不同的div之间。 我想在执行拖动功能时将一个表中的td元素与另一个表中的另一个元素进行交换。

我试过一些像kento和jquery这样的库，但我没有成功。

你能告诉我如何用纯JavaScript或一些图书馆来做到这一点。

这里是一个表我的HTML代码：

<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" draggable="true"> 
 
    <table> 
 
     <tbody> 
 
     <tr> 
 
      <th></th> 
 
      <th>1</th> 
 
      <th>2</th> 
 
      <th>3</th> 
 
      <th>4</th> 
 
      <th>lunch</th> 
 
      <th>5</th> 
 
      <th>6</th> 
 
      <th>7</th> 
 
      <th>8</th> 
 
     </tr> 
 
     <tr class="sortable list"> 
 
      <td draggable="true" style="background-color:green">monday</td> 
 
      <td draggable="true" style="background-color:red">eng</td> 
 
      <td draggable="true" style="background-color:blue">hindi</td> 
 
      <td draggable="true" style="background-color:yellow">maths</td> 
 
      <td draggable="true" style="background-color:red">eng</td> 
 
      <td draggable="true" style="background-color:blue">hindi</td> 
 
      <td draggable="true" style="background-color:yellow">maths</td> 
 
      <td draggable="true" style="background-color:red">eng</td> 
 
      <td draggable="true" style="background-color:blue">hindi</td> 
 
      <td draggable="true" style="background-color:yellow">maths</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Answer 1

其实你只有一个表中您的代码。尝试在当前的HTML中添加下面的代码作为初学者并继续。使用这个，你只能移动<td>并行。只要用这个想法拖拉和发展。最好有2个独立的桌子来达到你的要求。

<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(); 

}); 

Answer 2

尝试......但颜色不会被复制......需要做一些解析为that..try，让我知道:)

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