程序员经验分享-hwhale

如何启用跨表格单元格和行的 div 拖动和调整大小

2024-02-28

UPDATE

我认为 Jquery 是解决我的问题的唯一方法。所以让演示工作将会有很大的帮助。谢谢。

我正在尝试创建一个调度程序类型的应用程序。

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

例子。将调整大小橙色 div 拖到其下方的行中。

或者在这种情况下，如果我调整绿色 div 的大小，则需要将黄色 div 推入其下方的行中。

拖动 div 是不言自明的。

我有一个工作沙箱DEMO https://codesandbox.io/s/react-virtualized-template-forked-1u4dt?file=/Example.js

我确实在网上找到了一个小提琴，它完全满足我的需要，但它使用 Jquery，如果可能的话，我宁愿不使用它。我正在寻找的小提琴 http://jsfiddle.net/texas697/wqj4an5v/1/

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

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

普通 JS 解决方案

你说：

我确实找到了一个fiddle http://jsfiddle.net/texas697/wqj4an5v/1/网上有我需要的东西，但它 使用 jQuery，如果可能的话我宁愿不使用它。

我尝试使用 vanilla JS 复制上面提到的小提琴的输出（HTML 拖放 API https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API）。这是我能得到的最接近的。

注：变更resize: horizontal; to 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

css

ReactJS

jQueryUI

如何启用跨表格单元格和行的 div 拖动和调整大小 的相关文章

  • SVG线宽问题

    我开始了我的svg学习 我想用svg线做一些技巧吧 但有件事我不明白 我为每个技能创建 2 行 一行是空的 另一行是知识百分比 问题是 前两行的高度是我给出的笔画宽度的一半 其他线都有很好的高度 这是一个 jsbin http jsbin

  • 只保留 A-Z 0-9 并使用 javascript 从字符串中删除其他字符

    我正在尝试验证字符串以使它们成为有效的网址 我只需要保留 A Z 0 9 并使用以下命令从字符串中删除其他字符javascript or jquery 例如 贝儿餐厅 我需要将其转换为 百丽餐厅 所以字符被删除 只保留 A Z a z 0

  • 什么可能导致 Firefox 中出现此 HTML/CSS 渲染问题？

    款式 h2 color 71D0FF font size 11px font weight bold margin 0px 0px 5px 0px a box color FFFFFF important cursor pointer di

  • 如何防止输入文本中出现“后重音”

    我相信这是一个简单的问题 但在谷歌上搜索几个小时后我找不到任何答案 也许我无法在搜索中使用正确的单词 P 我有一个 javascript 方法 可以防止用户用数字以外的其他字符填充文本框 如下面的代码所示 它在 KeyDown 事件中使用

  • 未捕获的异常：数据表编辑器 - 不允许远程托管代码

    我正在尝试使用 Datatables 使用 datatableseditor 来实现 CRUD 操作 但是我收到错误消息 1 未捕获的异常 数据表编辑器 不允许远程托管代码 请参见http editor datatables net有关如何

  • jquery 中可点击 div 中的按钮

    我有整个 div 您可以单击它来切换该 div 的主要部分 问题是我在该 div 中也有可点击的按钮 当我点击它时 它会执行它应该做的事情 但同时也会切换整个 div 我怎样才能禁用它 Use event stopPropagation 单

  • 使用 Javascript/Node.js 在代码内执行 mongoimport

    node js javascript 中是否有任何库可供个人使用mongoimport在代码中 据我了解 mongoimport 有点像 exe 您必须先执行它 然后才能使用其文本输入环境 是否可以在我的代码中执行 mongoimport

  • Angular 2 将字符串转换为 md5 哈希

    我找到了ts md5 https www npmjs com package ts md5包 但在示例中它有一个hashStr方法 但现在不行了 类型上不存在属性 hashStr Md5 使用该错误后 该错误会记录在我的控制台中 我怎样才能

  • 在 Chrome 开发者工具中禁用调试器语句

    我正在尝试对恶意 JavaScript 进行逆向工程 当我最初加载侧面时 会注入 JS 代码 其中包括 debugger 语句并将断点注入我的 chrome 开发人员控制台 通过stackoverflow阅读 禁用所有断点does not帮

  • 如何在 Chrome 中获取 div 上的 keydown 事件？

    我想在 div 上获取 keydown 事件 我使用 JQuery keydown 很简单 但是 它不适用于 Chrome 为了在 chrome 上工作 我必须设置 tabindex 0 如果我这样做 Chrome 会在我的 div 周围放

  • 如何使用 NextJS 使用自托管字体face？

    使用 NextJS 的字体 我已经阅读了有关如何在 NextJS 中使用自托管字体的不同主题 我得到了什么 wait compiling 当我这样做时 font face font family montserrat src url myp

  • 如何在 Javascript 中连接 C# ActiveX 事件处理程序

    我尝试使用几个代码片段将 ActiveX 对象与 Javascript 事件处理程序挂钩 我无法确定为什么事件处理程序没有被调用 带有项目的 Github 存储库 https github com JesseKPhillips Csharp

  • 如何将项目插入到特定索引处的空数组中？

    我想将一个项目插入到空数组的指定索引中 我看到有 Array prototype splice 方法 但是 如果我在空数组上使用 splice 它只会添加项目来结束数组 如下所示 var a a splice 3 0 item 3 cons

  • 如何使用 jQuery 过滤 DropDownList 中的选项

    我有 2 个 DropDownList 第一个 DropDownList 有 4 个选项 第二个 DropDownList 有 20 个选项 我想要一个选项value 1在第一个 DropDownList 中选择我在第二个 DropDown

  • highchart堆积柱每个类别的总数据

    我想获取每个类别的总数据 这point stackTotal只给出活动数据的总数 从我粘贴的代码示例中 我想知道每种水果的总消耗量 因此 即使我单击右上角图例上的乔的名字 这使得堆叠图表上的所有乔信息都处于非活动状态 我仍然可以知道约翰 简

  • Array.of 与“[ ]”。何时使用 Array.of 而不是“[ ]”？

    当我发现时我正在读一些书Array of https developer mozilla org en docs Web JavaScript Reference Global Objects Array of 根据 MDN Array o

  • 深层嵌套 Flexbox 布局是否会导致性能问题？

    我一直在开发一个 ReactJS 项目 其中我使用 Flexbox 布局创建了大部分组件 由于使用 React 我们可以拥有深度嵌套的组件 因此我的布局具有嵌套的 Flexbox 布局 现在我的问题是 这对性能有任何问题吗 在一个页面上 有

  • 在 Firestore 文本字段中存储文本文件并删除换行符

    我正在尝试将 CSV 文件存储在 Cloud Firestore 内的文本字段中 然而 Firestore 正在删除所有换行符并将整个 CSV 文件存储为一行 这Firestore 数据类型文档 https firebase google

  • jQuery：如何正确使用 .stop() 函数？

    在本页面 http www arvag net old smsbox de http www arvag net old smsbox de 当您将鼠标悬停在 Informationen 和 ber ins 上时 它会显示一个子菜单 当您将

  • 如何从 Cloud Functions for Firebase 文件夹读取证书文件

    我正在尝试读取 certs 文件夹下的文件 如下所示 functions certs idp public cert perm 这是我用来读取文件的代码 fs readFileSync path join dirname certs idp

随机推荐

热门标签