Question

我正在尝试创建dragula.js功能，该功能将允许用户：

抓住一个 tbody 元素并将其拖动到其他 tbody 元素之前和之后。
在 tbody 内抓取任何 tr 元素，并将其放在表中的任意位置。

我有一个JSFiddle（如下）。现在，只有拖曳动作有效。我无法拖动tr来使用它。

感谢您的帮助

//Make the List of Groups Draggable
  dragula([document.getElementById('tbl')], {
    mirrorContainer: document.getElementById('tbl')
  }).on('drop', function (el, container) {
    console.log("dropped group");
  });
  
  
  //Make the List of Records Draggable
  dragula([document.getElementsByClassName('tbody-section')], {
    mirrorContainer: document.getElementsByClassName('tbody-section')
  }).on('drop', function (el, container) {
    console.log("dropped row");
  });

#tbl {
  width: 100%;
  border-collapse:collapse;
  font-size:13px;
}
#tbl thead tr th {
  background-color: #000;
  color: #fff;
  font-weight: bold;
  padding: 3px 8px;
  border: 1px solid #ddd;
  text-align: center;
}
#tbl tbody tr td {
  padding: 3px 8px;
  border: 1px solid #ddd;
}
#tbl tbody tr td:first-child {
  width: 50px;
  text-align: center;
}

#tbl tbody tr.section {
  background-color: yellow;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
    <thead>
      <tr>
        <th>ID</th>
        <th>LEVEL</th>
        <th>ITEM</th>
        <th>DESCRIPTION</th>
      </tr>
    </thead>
    <tbody class="tbody-section">
      <tr class="section">
        <td>1</td>
        <td>2</td>
        <td>170-018350-001</td>
        <td>ASSY, EATON MMP/CONTACTOR/LINK</td>
      </tr>
      <tr class="record">
        <td>2</td>
        <td>3</td>
        <td>150-018941-001</td>
        <td>MMP, EATON</td>
      </tr>
      <tr class="record">
        <td>3</td>
        <td>3</td>
        <td>150-018939-003</td>
        <td>CONTACTOR, EATON</td>
      </tr>
      <tr class="record">
        <td>4</td>
        <td>3</td>
        <td>150-019149-013</td>
        <td>LINK MODULE, EATON</td>
      </tr>
    </tbody>
    <tbody class="tbody-section">
      <tr class="section">
        <td>5</td>
        <td>2</td>
        <td>170-018350-001</td>
        <td>ASSY, KIT OF STUFF</td>
      </tr>
      <tr class="record">
        <td>6</td>
        <td>3</td>
        <td>P00218614</td>
        <td>TRANSFORMER, MICRON</td>
      </tr>
      <tr class="record">
        <td>7</td>
        <td>3</td>
        <td>P00218614</td>
        <td>COMPRESSOR, COPELAND</td>
      </tr>
    </tbody>
    <tbody class="tbody-section">
      <tr class="section">
        <td>5</td>
        <td>2</td>
        <td>A0300842</td>
        <td>ASSY, MORE STUFF</td>
      </tr>
      <tr class="record">
        <td>6</td>
        <td>3</td>
        <td>150-035840-005</td>
        <td>SENSOR, TEMP/RH</td>
      </tr>
      <tr class="record">
        <td>7</td>
        <td>3</td>
        <td>P00988801</td>
        <td>BRACKET, METAL</td>
      </tr>
    </tbody>
  </table>

JavaScript Dragula拖放两个不同的功能

0 个答案: