Как перетаскивать ячейки между двумя таблицами, которые имеют разные размеры - PullRequest
Новая
       18

Как перетаскивать ячейки между двумя таблицами, которые имеют разные размеры

0 голосов
/ 31 марта 2020

Я пытаюсь перетащить из контейнера (1 таблица) и второй таблицы. Вторая таблица различается по размеру, причем первый столбец расширяется в соответствии с пользовательским вводом. Первая строка показывает период и изменяется в соответствии с пользовательским вводом (дата начала и дата окончания). Я не могу заставить перетаскивание работать вместе с гибкими таблицами размеров.

Приведенный ниже код предназначен для перетаскивания, но в настоящее время он добавляется к нижней части таблицы. Мне нужно изменить appendTo, но я не уверен в правильности термина. 

     $(document).ready(function () {
      $('.event').on("dragstart", function (event) {
         var dt = event.originalEvent.dataTransfer;
          dt.setData('Text', $(this).attr('id'));
          });
      $(".dropzone").on("dragenter dragover drop", function (event) {
          event.preventDefault();
          if (event.type === 'drop') {
              var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
              de = $('#' + data).detach();
              de.appendTo($(this));
          }
      });

Другая часть, которую я использую, - это добавление новых строк - в настоящее время я использую нижеприведенное. Проблема в том, как сделать его гибким, чтобы он также изменялся при появлении новых столбцов: 

  function appendRow() {
  var tbl = document.getElementById('myTable'), // table reference
    row = tbl.insertRow(tbl.rows.length),      // append table row
    i;
    UpdateTankName= document.getElementById("NewTankName").value;
   // insert table cells to the new row
   for (i = 0; i < 1; i++){
    createCell(row.insertCell(i), UpdateTankName, 'true')};
  }


  function createCell(cell, text, style) {
  var div = document.createElement('div'), // create DIV element
    txt = document.createTextNode(text); // create text node
  div.appendChild(txt);                    // append text node to the DIV
  div.setAttribute('draggable= "true"')        // set DIV class attribute
  cell.appendChild(div);                   // append DIV to the table cell
...