开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js table 左右拖拽

JavaScript中的表格左右拖拽功能通常涉及到HTML、CSS和JavaScript的结合使用，以实现用户可以通过鼠标拖动来改变表格列宽的效果。以下是实现这一功能的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

HTML Table: 表格由<table>, <tr>, <td>等元素构成。
CSS: 用于样式设计和布局调整。
JavaScript: 用于添加交互性和动态行为。

优势

用户体验: 允许用户根据需要自定义视图，提高数据查看的便捷性。
灵活性: 可以适应不同屏幕尺寸和分辨率。
可访问性: 对于视力不佳的用户，可以放大列宽以便更好地阅读内容。

类型

固定宽度: 列宽固定不变。
可调整宽度: 用户可以通过拖拽来改变列宽。

应用场景

数据分析工具: 如Excel类似的在线表格编辑器。
项目管理软件: 显示任务列表和时间线。
仪表盘: 展示关键性能指标。

实现步骤

HTML结构: 创建一个基本的表格。
CSS样式: 设置表格的基本样式和拖拽手柄的样式。
JavaScript逻辑: 添加事件监听器来处理拖拽事件。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag to Resize Table Columns</title>
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  .resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
  }
</style>
</head>
<body>

<table id="myTable">
  <tr>
    <th>Header 1 <span class="resizer"></span></th>
    <th>Header 2 <span class="resizer"></span></th>
    <th>Header 3 <span class="resizer"></span></th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

<script>
  const table = document.getElementById('myTable');
  let isResizing = false;
  let startX, startWidth;

  table.querySelectorAll('.resizer').forEach(resizer => {
    resizer.addEventListener('mousedown', (e) => {
      isResizing = true;
      startX = e.pageX;
      startWidth = parseInt(document.defaultView.getComputedStyle(e.target.parentElement, '').getPropertyValue('width'), 10);
    });
  });

  document.addEventListener('mousemove', (e) => {
    if (!isResizing) return;
    const offsetX = e.pageX - startX;
    const newWidth = startWidth + offsetX;
    e.target.parentElement.style.width = `${newWidth}px`;
  });

  document.addEventListener('mouseup', () => {
    isResizing = false;
  });
</script>

</body>
</html>

可能遇到的问题和解决方案

拖拽不流畅: 确保mousemove事件处理函数尽可能高效，避免不必要的DOM操作。
列宽调整不一致: 使用getComputedStyle来获取准确的初始宽度，并在调整时应用相同的单位。
跨浏览器兼容性: 测试在不同浏览器中的表现，并根据需要添加前缀或使用Polyfill。

解决方案

优化性能: 使用requestAnimationFrame来优化动画效果。
响应式设计: 结合媒体查询来适应不同屏幕尺寸。
测试: 在多种设备和浏览器上进行充分测试。

通过上述步骤和代码示例，可以实现一个基本的表格列宽拖拽功能。在实际应用中，可能需要根据具体需求进一步调整和优化。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

table表格拖拽

el-table 的拖拽使用 Sortable.js 官方文档 :https://github.com/SortableJS/Sortable 1....$el.querySelector( ".el-table__body-wrapper tbody"); // 创建行拖拽实例 const dragTableRow = Sortable.create...: ".disabled", //指定不可拖动的类名（el-table中可通过row-class-name设置行的class） dragClass: "dragClass", //设置拖拽样式类名...$el.querySelector(".el-table__header-wrapper tr"); // 创建列拖拽实例 const dragTableCol = Sortable.create.../** * 在做列拖拽功能时发现问题：表头位置错乱，但是内容列正常 * 于是我给el-table绑定key，每次拖拽结束改变key触发表格重新渲染

2.7K2 0

js拖拽

开发了那么久，对于js实现拖拽多少都写过，用于实际项目却没有。先看一下之前写的：如果鼠标慢慢移动，拖拽是没有任何问题的，如果速度快了，那么鼠标和元素就会分离。

5.4K3 0

js拖拽

/*js拖拽逻辑: 第一：为什么要定位? 因为 ? 往左往上left top要定位的哈第二：为什么点击down包括着移动move与抬起up. 因为代表这三个是不独立的....鼠标是400.那样的话,400-(150-100)=350.就是div所在的位置.也就是move后的位置. js拖拽: <!

4.6K4 1

js拖拽

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title>...

5.2K1 0

element关于table拖拽排序问题

//table的默认排序方式是按ID排序顺序为递减这里可以改成其它比如 order table :data="tableData" :default-sort="{prop: '...> table> 但是，element官方组件并不支持拖拽排序，我在这里引入sortablejs实现拖拽排序的功能 sortablejs GitHub地址 //sortablejs GitHub...地址 https://github.com/SortableJS/Sortable#readme //安装sortable.js Install with NPM: $ npm install sortablejs...--save //在组件内引入 import Sortable from 'sortablejs' //为需要拖拽排序的表格添加ref属性 table ref="dragTable">...$el.querySelectorAll( '.el-table__body-wrapper > table > tbody' )[0]; this.sortable

1.2K2 0

element-ui table 拖拽实现

Element-Ui Table 组件原本是不支持拖拽的，由于实际开发过程中有拖拽功能的需求，从开发角度上来说这种使用第三方组件库不支持然后自己加功能的方式有 Hack 的嫌疑，稍有不慎，代码就会越写越烂...Table 支持拖拽功能 vuedraggable 是一个拖拽类组件，底层是他们的 Sortable 库，有老外对此封装了一个 NPM Package，根据实际情况取舍是 copy 一个文件还是 install...使用下面的代码作为一个组件引入， handle 指定具体的 DOM 元素可拖拽，用于防止 input 无法鼠标选中的情况。...$el.querySelector( '.el-table__body-wrapper tbody' ) sortable.create(table, {...} else { wrapper.style.minHeight = 'auto' } } } } el-form-item 拖拽

1.1K2 0

原生JS拖拽

="IE=edge"> 原生JS...拖拽 * { margin: 0; padding: 0; }...class="box" id="drag"> window.onload = function () { // 获取拖拽的节点...let drag = document.getElementById('drag') // console.log(drag); // 按下别拖拽对象的时候

13.1K4 0

Js拖拽事件

oDrag.style.left=l+'px'; oDrag.style.top =t+'px'; } 知识点：用class获取元素封装; 学习mouseover事件; 常见拖拽

14.1K2 0

js拖拽上传图片

有时候，在开发中，需要遇到拖拽上传图片的需求，即从磁盘选中一张或多张图片，然后按着鼠标把图片拖动到页面上指定的区域，实现图片的上传。...ie=edge"> Document js

18.2K3 0

JS实现拖拽代码

////html的代码说明： ////定义了一个table，用于测试js拖拽功能 table> ////js代码说明： ////currentMoveObj ：全局对象，记录当前拖拽的那个对象...，始终更新当前拖拽对象的坐标即可 function mouseMove() { if(null !...function(){ mouseDown(obj)}; obj.onmousemove= function(){ mouseMove()}; } JS...拖拽

8.1K0 0

js拖拽自动排列

上一次写了拖拽，其实主要还是想实现拖拽之后实现自动排列，跟手机屏幕那样移动图标可以自动排列，先看效果： ? 很常见的一个效果，先说一下思路：每一个元素都是绝对定位，初始化的时候是通过js去排列。...拖拽使用的方法跟上一篇文章一模一样。...拖拽的时候，当鼠标点击选中当前的元素的时候，这个元素移动，当移动到另一个元素一半的时候，相当于要替换这个元素，我是以这样一个方法判断移动到哪一个位置： let moveIndex = Math.round

5.7K2 0

js事件高级：拖拽

什么是拖拽拖拽就是在某一个对象上，当鼠标按下去之后，拖着对象走，松开鼠标时，对象位置变成拖拽的位置简单拖拽 1.实现简单的拖拽功能 2.当拖拽对象到网页边缘时，会停留在边缘实现代码 <!...} return false; } 实现效果完美拖拽..._吸附 1.在实现简单拖拽的基础上给拖拽对象一个区域范围 2.拖拽吸附：在靠近父级边缘时自动吸附在父级边缘实现代码 <!...oDiv.releaseCapture(); } } 实现效果带框拖拽...带框拖拽是拖拽的另一种形式，拖动时，跟着移动的是对象的虚线框，虚线框就是对象将要拖移到达的位置实现代码 <!

9.4K2 0

touch实现js拖拽

用touch做js拖拽.记住，touch只在移动端有效. 问题：为什么用定位流做? 因为 ? 问题2：touches[0]是什么意思？是一次只有一个手指触碰....问题4,拖拽怎么做？第一;我举个例子把，好吧. 例如start的时候div在100，100，鼠标在150 150的地点,move的时候在300 300，鼠标在350 350 的位置....（移动后的）最终达到了拖拽的目的. 核心：开始是开始的xy坐标,移动是移动的xy坐标. <!

5.5K5 1

js实现简易拖拽

简易拖拽目录代码实例代码解析 scrollWidth,clientWidth,offsetWidth的区别 offsetX,clientX,pageX的辨析下载源码链接代码实例 <...x: x, y: y } } })() 代码解析在 document 对象上绑定 mousemove 和 mouseup 事件，不在拖拽的元素上绑定是因为当鼠标移动太快而超出元素的范围时会停止拖拽...拖拽再快都不会超出 document 的范围。

6.3K1 0

js 实现元素拖拽

概述 js 实现拖拽，主要使用元素的 onmousedown、onmousemove、onmouseup 三个事件实现。...// 元素的 clientX 和 clientY 默认是以元素左上角位置来计算的，这里需要向左向上同时减去鼠标点击的位置差，从而可以保证鼠标始终显示在拖拽元素时的位置

10.1K3 0

js拖拽框选插件

分享一个js的拖拽框选插件官网：https://dragselect.com/ 源码：https://github.com/ThibaultJanBeyer/DragSelect.git 使用： pnpm

13.6K2 0

使用 Sortable.js 库实现 Vue3 elementPlus 的 el-table 拖拽排序

结合 Vue 3 和 Element Plus 框架，我们可以利用 Sortable.js 库轻松实现这一功能。本文将介绍如何在el-table组件中集成拖拽排序，使数据管理更加直观和高效。...下载依赖 npm i sortablejs @types/sortablejs 添加类名首先给 el-table 加上类名：class="elTable" table class="elTable...= () => { const table = document.querySelector(".elTable .el-table__body-wrapper tbody"); Sortable.create...(table, { group: 'shared', animation: 150, ghostClass: 'sortable-ghost', //拖拽样式 easing: 'cubic-bezier...组件中集成 Sortable.js 库，以实现表格数据的拖拽排序功能。

6491 0

原生js拖拽指定div

DOCTYPE html> 原生js拖拽效果</title

9.9K2 0

js实现带框拖拽

带框拖拽目录代码实例代码解析下载源码链接代码实例带框拖拽 .div1{ width:400px

4.8K3 0

js实现限定范围拖拽

限定范围拖拽目录代码实例与简易拖拽的差异下载源码链接代码实例 * { padding: 0; margin: 0; } #box1 { width: 500px...document.body.clientTop } return { x: x, y: y } } })() 与简易拖拽的差异...简易拖拽的链接简易拖拽可移动位置的改变 // 此处就是父元素的宽度减去子元素宽度 var width = box1.clientWidth - box.offsetWidth var height

4.5K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭