javascript - 在表之间拖动时将一个 'td' 元素与另一个元素交换

Question

我正在制作一个 UI，其中有两个位于不同 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

试试这个……但是颜色没有被复制……需要为此做一些解析……试试让我知道:)

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