javascript 如何启用在表格单元格和行之间拖动div并调整其大小

6ioyuze2 于 2023-05-05 发布在 Java

关注(0)|答案(2)|浏览(182)

更新

我认为JQuery是解决我的问题的唯一方法。所以做好演示会有很大的帮助。谢谢大家。
我试图创建一个调度器类型的应用程序。

我需要能够调整大小的彩色div垂直，也拖动到任何行/表中的单元格。
将调整大小的橙子div拖动到它下面的行中。

或者在这种情况下，如果我调整绿色div的大小，黄色div需要被推到它下面的行中。

拖动div是不言自明的。
我有一个工作沙箱DEMO
我确实在网上找到了一个小提琴，它正好有我需要的东西，但它使用了Jquery，如果可能的话，我宁愿不使用它。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'
      });
    });

JavaScript

来源：https://stackoverflow.com/questions/71011071/how-to-enable-dragging-and-resizing-of-divs-across-table-cells-and-rows

2条答案

按热度按时间

aurhwmvo1#

Vanilla JS解决方案

你说：
我确实在网上找到了一个fiddle，它正好有我需要的东西，但它使用jQuery，如果可能的话，我宁愿不使用它。
我尝试使用vanilla JS（HTML Drag and Drop API）复制上面提到的fiddle的输出。这是我能找到的最接近的了。

注意：如果要垂直调整框的大小，请将resize: horizontal;更改为resize: vertical;。*

请参见下面的片段。

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>

赞(0）回复(0）举报 2023-05-05

w8f9ii692#

看这里。使用jQuery看起来像一个优雅的实现。
Draggable, Movable and Resizable HTML DOM elements using jQuery

赞(0）回复(0）举报 2023-05-05