Question

我正在创建一个用户界面，其中有两个表位于div个不同的表中。我想在执行拖动功能时将一个表中的一个td元素与另一个表中的另一个元素交换。

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

请告诉我如何使用纯JavaScript或某些库。

以下是我的一个表的HTML代码：

＆＃13;

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

＆＃13;

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

试试这个......但是没有复制颜色......需要对那个进行一些解析..让我知道：）

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

交换一个＆＃39;＆＃39;在表之间拖动时，元素与另一个元素

2 个答案: