5

In my HTML table of one column and n rows, for example:

<table id="my-table">
  <tr>
    <td>How</td>
  </tr>
  <tr>
    <td>Are</td>
  </tr>
  <tr>
    <td>You</td>
  </tr>
</table>

I want to make each row draggable and droppable into another one. If you drop one row A into another row B, the HTML content of these respective rows should get exchanged.

To do so, I read through quite some documentations and tutorials, but there appears something o be missing that I just can't figure out. What I did so far is attach the following code into each <td>tag:

draggable="true" ondragstart="dragCell(event)" ondragover="allowDrop(event)" ondrop="dropCell(event)" ondragenter="handleDragEnter(event)" ondragleave="handleDragLeave(event)" ondragend="handleDragEnd(event)"

and my JavaScript is:

/*##############################################################################
##                            1. Dragstart Handler                            ##
##############################################################################*/

function dragCell(ev) {
  let draggedRow = ev.target.closest("tr");
  let rowNumber = draggedRow.rowIndex;
  let tableId = draggedRow.parentNode.parentNode.getAttribute("id");
  let data = {"id":tableId,"rowNumber":rowNumber};
  let cellsdragged = draggedRow.children;
  let amountOfCells = cellsdragged.length;
  let dataToTransfer = [];
  for (let i = 0; i < amountOfCells; i++) {
    let currentCell = cellsdragged[i];
    dataToTransfer.push(currentCell.outerHTML);
  }
  data["cellContents"] = dataToTransfer;
  data = JSON.stringify(data);
  ev.dataTransfer.setData("text/plain",data);
  document.getElementsByTagName("body")[0].style.cursor = "grabbing";
}

/*##############################################################################
##                             2. Dragover Handler                            ##
##############################################################################*/

function allowDrop(ev) {
  ev.preventDefault();
}

/*##############################################################################
##                               3. Drop Handler                              ##
##############################################################################*/

function dropCell(ev) {
  ev.preventDefault();
  if (ev.stopPropagation) {
    ev.stopPropagation();
  }
  document.getElementsByTagName("body")[0].style.cursor = "default";
  let data = ev.dataTransfer.getData("text/plain");
  data = JSON.parse(data);
  let rowToDrop = ev.target.closest('tr');
  let targetIndex = rowToDrop.rowIndex;
  let targetId = rowToDrop.parentNode.parentNode.getAttribute("id");
  if (data.id == targetId && data.rowNumber != targetIndex) {
    let targetContents = [];
    let cellsForDrop = rowToDrop.children;
    let amountOfCells = cellsForDrop.length;
    for (let i = 0; i < amountOfCells; i++) {
      targetContents
        .push(cellsForDrop[i].outerHTML);
    }
    let draggedRow = document.getElementById(data.id).rows[data.rowNumber];
    let cellsOfDrag = draggedRow.children;
    for (let i = 0; i < amountOfCells; i++) {
      cellsForDrop[i].outerHTML = data.cellContents[i][0];
      cellsOfDrag[i].outerHTML = targetContents[i][0];
    }
  }
}

/*##############################################################################
##                             4. Dragenter Handler                           ##
##############################################################################*/

function handleDragEnter(ev) {
  ev.target.closest('tr').classList.add('ready-for-drop');
}

/*##############################################################################
##                            5. Dragleave Handler                            ##
##############################################################################*/

function handleDragLeave(ev) {
  ev.target.closest('tr').classList.remove('ready-for-drop');
}

/*##############################################################################
##                              6. Dragend Handler                            ##
##############################################################################*/

function handleDragEnd(event) {
  let rows = ev.target.closest("table").rows;
  let amount = rows.length;
  for (let i = 0; i < amount; i++) {
    if (rows[i].classList.contains('ready-for-drop')) {
      rows[i].classList.remove('ready-for-drop')
    }
  }
}

When I run this and drag one row into another one, the console provides me with an error concerning ev.target.closest, for the Dragenter, Dragleave and the Dragend Handler functions, always saying ev.target.closest is not a function. Although I use exactly the same syntax in the dragstart handler function, no error is reported in the console on that line. When finishing the drag, the content of the dragged and dropped row both become <.

What am I missing here? Please consider that I don't want to use any jQuery solution, I'd like to stick to vanilla JavaScript. Please also consider that I indeed need the whole outerHTML to be exchanged, because my <td> tags may contain cell-specific attribute values.

1 Answer 1

5

Ok figured out a solution, most important facts:

  • I used addEventListener instead of HTML inline event listeners inside the HTML tags, as mentioned above, for several reasons (which I won't specify further here)

  • The hardest troubles I had was with the fact that my dragleave event function fired when I was dragging the dragged element over the child of an element with the dragenter & dragleave listeners bound to it. I read countless articles & posts in this forum about this issue, and none of the proposed solutions seemed to work easily or simply with my very basic HTML table rows and cells, and soon employed functions to stop event propagations etc., which is actually not even necessary, as you'll see in my code. Furthermore I completely ommit the dragleave event listener in my solution, so this may be one of the easier ways to reach what I want, which is why I wanted to share it here for others which may want to do similar stuff as I wanted.

What's different from above for everything to work is:

HTML: I included only draggable="true" class="table-cell" in the td tags

JavaScript: Quite different now, but works perfectly:

/*##############################################################################
##    1. Define Function which adds all the required event listeners          ##
##############################################################################*/

function addDragEvents(element) {
  element.addEventListener("dragstart",dragCell);
  element.addEventListener("dragover",allowDrop);
  element.addEventListener("drop",dropCell);
  element.addEventListener("dragenter",handleDragEnter);
  element.addEventListener("dragend",handleDragEnd);
}

/*##############################################################################
##    2. Define Function which resets the drag state for the concerned table  ##
##############################################################################*/

function resetDragState(e) {
  let data = e.dataTransfer.getData("text/plain");
  data = JSON.parse(data);
  let rows = document.getElementById(data.id).rows;
  for (let row of rows) {
    if (row.classList.contains('ready-for-drop')) {
      row.classList.remove('ready-for-drop');
    }
    let cells = row.cells;
    for (let cell of cells) {
      cell.style.cursor="pointer";
    }
  }
}

/*##############################################################################
##    3. Add Required Event listeners to all table cells                      ##
##############################################################################*/

let cells = document.getElementsByClassName('table-cell');
for (let cell of cells) {
  addDragEvents(cell);
}

/*##############################################################################
##                            4. Dragstart Handler                            ##
##############################################################################*/

// This function is created to define the action of a drag (which data will be
// taken for transfer to the HTML element into which the dragged element's
// content will be dropped)

function dragCell(e) {
  // Change the cursor to a grabbing hand on dragstart
  let cells = document.getElementsByClassName('table-cell');
  for (let cell of cells) {
    cell.style.cursor="grabbing";
  }
  // Three pieces of information must be transferred for the drag & drop to work
  // properly: the table id of the table having the row being dragged (to assure
  // that D&D only works among rows of the same table), the row index of the row
  // being dragged (to know which row needs to be replaced via the drop
  // function), and finally the content of the row being dragged
  let draggedRow = e.target.closest("tr");
  // Get the row index of that row
  let rowNumber = draggedRow.rowIndex;
  // Get the id name of the table having that row
  let tableId = draggedRow.parentNode.parentNode.getAttribute("id");
  // Initiate JSON object which will be transferred to the drop row
  let data = {"id":tableId,"rowNumber":rowNumber};
  // Append all the cells as second element onto this same object
  let cellsdragged = draggedRow.children;
  let amountOfCells = cellsdragged.length;
  let dataToTransfer = [];
  for (let i = 0; i < amountOfCells; i++) {
    let currentCell = cellsdragged[i];
    dataToTransfer.push(currentCell.outerHTML);
  }
  data["cellContents"] = dataToTransfer;
  data = JSON.stringify(data);
  e.dataTransfer.setData("text/plain",data);
}

/*##############################################################################
##                             5. Dragover Handler                            ##
##############################################################################*/

// This function is used to allow for drops into the corresponding HTML elements
// (the default behavior doesn't allow this)
function allowDrop(e) {
  e.preventDefault();
}

/*##############################################################################
##                               6. Drop Handler                              ##
##############################################################################*/

function dropCell(e) {
  // First, prevent default behavior once again
  e.preventDefault();
  // Second, access data coming from dragged element (which is the index of the
  // row from which data is being dragged)
  let data = e.dataTransfer.getData("text/plain");
  data = JSON.parse(data);
  // Next, get the index of the row into which content shall be dropped
  let rowToDrop = e.target.closest('tr');
  let targetIndex = rowToDrop.rowIndex;
  // Next, get the id of the table of that retrieved row
  let targetId = rowToDrop.parentNode.parentNode.getAttribute("id");
  // Next, only proceed if the dragged row comes from the same table as the
  // target row, and if the dragged and the target rows are two different rows
  if (data.id == targetId && data.rowNumber != targetIndex) {
    // Store the contents of the target row in the same array structure as the
    // one coming from the dragged row
    let targetContents = [];
    // Exchange the contents of the two rows
    let cellsForDrop = rowToDrop.children;
    let amountOfCells = cellsForDrop.length;
    for (let i = 0; i < amountOfCells; i++) {
      targetContents
        .push(cellsForDrop[i].outerHTML);
    }
    // Exchange the contents of the two rows
    let draggedRow = document.getElementById(data.id).rows[data.rowNumber];
    let cellsOfDrag = draggedRow.children;
    for (let i = 0; i < amountOfCells; i++) {
      // Replace the content of the row into which the drag is being dropped
      // with the content of the dragged row
      cellsForDrop[i].outerHTML = data.cellContents[i];
      // Replacement of the outerHTML deletes all bound event listeners, so:
      addDragEvents(cellsForDrop[i]);
      // And now, replace the content of the dragged row with the content of the
      // target row. Then, do the same for the value.
      cellsOfDrag[i].outerHTML = targetContents[i];
      addDragEvents(cellsOfDrag[i]);
    }
    resetDragState(e);
  }
}

/*##############################################################################
##                             7. Dragenter Handler                           ##
##############################################################################*/

// When dragging over the text node of a table cell (the text in a table cell),
// while previously being over the table cell element, the dragleave event gets
// fired, which stops the highlighting of the currently dragged cell. To avoid
// this problem and any coding around to fight it, everything has been
// programmed with the dragenter event handler only; no more dragleave needed

// For the dragenter event, e.target corresponds to the element into which the
// drag enters. This fact has been used to program the code as follows:

var previousRow = null;

function handleDragEnter(e) {
  // Assure that dragenter code is only executed when entering an element (and
  // for example not when entering a text node)
  if (e.target.nodeType === 1) {
    // Get the currently entered row
    let currentRow = this.closest('tr');
    // Check if the currently entered row is different from the row entered via
    // the last drag
    if (previousRow !== null) {
      if (currentRow !== previousRow) {
        // If so, remove the class responsible for highlighting it via CSS from
        // it
        previousRow.className = "";
      }
    }
    // Each time an HTML element is entered, add the class responsible for
    // highlighting it via CSS onto its containing row (or onto itself, if row)
    currentRow.className = "ready-for-drop";
    // To know which row has been the last one entered when this function will
    // be called again, assign the previousRow variable of the global scope onto
    // the currentRow from this function run
    previousRow = currentRow;
  }
}

/*##############################################################################
##                              8. Dragend Handler                            ##
##############################################################################*/

// This function is required for cases where the dragged has been dropped on a
// non-valid drop target.

function handleDragEnd(e) {
  resetDragState(e);
}

I left the comments inside, as I struggeled a lot searching online (and without success) how to use the Drag & Drop API as simply as possible to make rows / cells of HTML tables drag- & droppable, so I hope this answer will help out others!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.