Сменить элемент 'td' с другим при перетаскивании между таблицами

Question

Я создаю пользовательский интерфейс, в котором у меня есть две таблицы, которые находятся в разных div. Я хочу поменять один элемент td в одной таблице с другой в другой таблице, выполняя функцию перетаскивания.

Я пробовал некоторые библиотеки, такие как kento и jquery sortable, но я не был успешным.

Не могли бы вы рассказать мне, как это сделать с использованием чистого 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>