'How to enable dragging and resizing of divs across table cells and rows

UPDATE

I am thinking Jquery is the only solution to my problem. So making the demo work would be a big help. Thank you.

I am trying to create a scheduler type application.

SCREENSHOT

I need to be able to resize the colored divs vertically and also drag them to any row/cell in the table.

Example. Drag resize orange div into row beneath it.

IMAGE

Or in this case if I resize the Green div the yellow div needs to be pushed into the row beneath it.

IMAGE 2

Dragging divs is self-explanatory.

I have a working sandbox DEMO

I did find a fiddle online that has exactly what I need but it uses Jquery and I would prefer not to use it if possible. FIDDLE OF WHAT I AM LOOKING FOR

   $(function() {
      $(".drop").sortable({
        connectWith: "td",
        placeholder: "ui-state-highlight"
      }).disableSelection();
    });

    $(function() {
      $(".resize").resizable({
        grid: [50, 0],
        handles: 'e'
      });
    });
javascriptjquerycssreactjsjquery-ui


Solution 1:[1]

Vanilla JS solution


You said: I did find a fiddle online that has exactly what I need, but it uses Jquery and I would prefer not to use it if possible.

I tried to replicate the output of the fiddle mentioned above using vanilla JS (HTML Drag and Drop API). This is the closest that I could get.

Note: Change resize: horizontal; to resize: vertical; if you want to resize boxes vertically.

See the snippet below. Let me know if this is helpful.

document.addEventListener('DOMContentLoaded', (event) => {

  var dragSrcEl = null;

  function handleDragStart(e) {
    dragSrcEl = this;

    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
  }

  function handleDragOver(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }

    e.dataTransfer.dropEffect = 'move';

    return false;
  }

  function handleDragEnter(e) {
    this.classList.add('over');
  }

  function handleDragLeave(e) {
    this.classList.remove('over');
  }

  function handleDrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation();
    }

    if (dragSrcEl != this) {
      dragSrcEl.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData('text/html');
    }

    return false;
  }

  function handleDragEnd(e) {
    items.forEach(function(item) {
      item.classList.remove('over');
    });
  }


  let items = document.querySelectorAll('.container .drop');
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart, false);
    item.addEventListener('dragenter', handleDragEnter, false);
    item.addEventListener('dragover', handleDragOver, false);
    item.addEventListener('dragleave', handleDragLeave, false);
    item.addEventListener('drop', handleDrop, false);
    item.addEventListener('dragend', handleDragEnd, false);
  });
});
table {
  height: 100px;
}

td {
  height: 68px;
  width: 150px;
  border: gray thin solid;
}

.resize {
  top: 10px;
  width: 50px;
  height: 50px;
  float: left;
  border: #002DA4 thin solid;
  border-radius: 8px;
  text-align: center;
  border-right-color: red;
  position: absolute;
  overflow: hidden;
  resize: horizontal;
  z-index: 1;
}

td.drop {
  position: relative;
  width: 60px;
}
<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>

</head>

<body>

  <div>
    <table cellspacing='3'>
      <tr>
        <th>8am</th>
        <th>9am</th>
        <th>10am</th>
        <th>11am</th>
        <th>12n</th>
        <th>1pm</th>
        <th>2pm</th>
        <th>3pm</th>
        <th>4pm</th>
        <th>5pm</th>
      </tr>

      <tbody class='container'>
        <tr>
          <td class='drop'>
            <div draggable='true' class='resize'>Session A</div>
          </td>
          <td draggable='true' class='drop'>
            <div draggable='true' class='resize'>Session B</div>
          </td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
        </tr>

        <tr>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
          <td draggable='true' class='drop'></td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>

Solution 2:[2]

Take a look here. With jQuery. Looks like an elegant implementation.

Draggable, Movable and Resizable HTML DOM elements using jQuery

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Igor

Related Questions