JavaScript Dragula Drag & Drop две разные функции - PullRequest
Новая
       23

JavaScript Dragula Drag & Drop две разные функции

0 голосов
/ 13 июня 2019

Я пытаюсь создать функцию dragula.js, которая позволит пользователю:

  1. захватите элемент tbody и перетащите его до и после других элементов tbody .
  2. Возьмите любой элемент tr внутри tbody s и бросьте в любом месте таблицы.

У меня есть JSFiddle (ниже). Прямо сейчас работает только перетаскивание тела. Я не могу заставить его работать с ним.

Любая помощь приветствуется 

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