js实现表格拖拽排序

基础概念

表格拖拽排序是一种用户界面交互方式，允许用户通过拖动表格行来重新排列它们的顺序。这种功能在现代Web应用中非常常见，特别是在需要灵活管理数据顺序的场景中。

类型与应用场景

简单列表排序：适用于任务管理、待办事项等。
复杂表格排序：适用于需要多列数据展示和排序的金融报表、数据分析等场景。

实现方法

在JavaScript中，可以通过HTML5的拖放API结合一些第三方库（如SortableJS）来实现这一功能。

示例代码

以下是一个简单的示例，展示如何使用SortableJS库来实现表格行的拖拽排序：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Drag and Drop Sorting</title>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  .dragging {
    opacity: 0.5;
  }
</style>
</head>
<body>

<table id="sortableTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>John Doe</td><td>30</td></tr>
    <tr><td>Jane Smith</td><td>25</td></tr>
    <tr><td>Mike Johnson</td><td>40</td></tr>
  </tbody>
</table>

<script>
  new Sortable(document.getElementById('sortableTable').querySelector('tbody'), {
    animation: 150,
    ghostClass: 'dragging'
  });
</script>

</body>
</html>

可能遇到的问题及解决方法

问题1：拖拽时页面滚动

原因：当表格内容超出视口高度，拖拽到视口边缘时，页面会自动滚动。

解决方法：可以通过监听拖拽事件，动态控制页面的滚动行为。

new Sortable(el, {
  onEnd: function(evt) {
    // 阻止默认的滚动行为
    evt.preventDefault();
  }
});

问题2：兼容性问题

原因：不同浏览器对拖放API的支持程度不同。

解决方法：使用成熟的库如SortableJS，它们通常已经处理了跨浏览器的兼容性问题。

问题3：性能问题

原因：大量数据或复杂DOM结构可能导致拖拽操作卡顿。

解决方法：优化DOM结构，减少不必要的重绘和回流，或者使用虚拟滚动技术。

通过上述方法和示例代码，可以实现一个基本的表格拖拽排序功能，并针对常见问题提供了解决方案。

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

有帮助

没帮助

相关·内容

Element-UI表格组件实现行拖拽排序

前言运营小姐姐说想要可以直接拖拽排序的功能，原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置，拖拽操作就很方便 ? 效果 ‍ ?...实现方式 <el-table v-loading="loading" :default-sort="{prop: 'sortNum', order: 'ascending'}"

4.4K2 0

HTML5、JS实现元素拖拽排序

先介绍一下html5的drag属性,拖放（Drag 和 drop）是 HTML5 标准的组成部分。想要启用drag，只要给元素加上draggable="true...

5586 0

ElementUI 基于vue+sortable.js实现表格行拖拽

基于vue+sortable.js实现表格行拖拽实践环境 sortablejs@1.13.0 vue@2.6.11 element-ui@2.13.2 安装sortable.js拖拽库 npm install...newIndex：目标位置对应行的索引 * oldIndex：被拖拽行的索引 * * ====================（被拖拽记录行...* ====================（被拖拽记录行2） * 如果从上往下拖拽，即newIndex > oldIndex，那么在目标位置对应记录行上移(目标位置对应记录行索引值减...1)，在newIndex所指位置插入被拖拽行(被拖拽行索引设置为newIndex)，视觉效果就是在after位置(即目标位置对应行下方)插入被拖拽行 * 如果从下往上拖拽，即newIndex...拖拽行(被拖拽行索引设置为newIndex)，视觉效果就是在上述before位置(即目标位置对应行上方

3.5K1 0

Easyui datagrid 实现表格记录拖拽

datagrid-dnd.js，注释头尾两行代码，如下 //(function($){ //})(jQuery); 关键代码引入js文件 js/datagrid-dnd.js"> 定义表格，添加事件onBeforeDrag，onDrop 事件：事件参数...函数实现 // 正在编辑时，禁止拖拽 function onBeforeDrag(row) { if (editIndex !...= undefined) { // 处于正在编辑状态,取消拖拽 return false; } } // 停止拖拽，释放鼠标，提交目标行，被拖拽行，拖拽方向灯相关数据到服务器...使用Django代码实现，如下，需要注意的是，不管是哪个拖拽方向分top or bottom，都需要考虑拖拽到目标行记录上方及目标行记录上方。

1.4K2 0

JS实现拖拽代码

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

8.1K0 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 三个事件实现。...1、onmousedown：鼠标按下事件 2、onmousemove：鼠标移动事件 3、onmouseup：鼠标抬起事件实现思路我们当左键点击时，需要记录当前的鼠标点击位置相对于该元素左上角的x，y...// 元素的 clientX 和 clientY 默认是以元素左上角位置来计算的，这里需要向左向上同时减去鼠标点击的位置差，从而可以保证鼠标始终显示在拖拽元素时的位置

10.1K3 0

table表格拖拽

el-table 的拖拽使用 Sortable.js 官方文档 :https://github.com/SortableJS/Sortable 1....install sortablejs --save //引用 sorttablejs import Sortable from 'sortablejs' 2.用法 SorRow() { // 获取表格...SorCol() { //获取表格col的父节点 const eleCol = this..../** * 在做列拖拽功能时发现问题：表头位置错乱，但是内容列正常 * 于是我给el-table绑定key，每次拖拽结束改变key触发表格重新渲染...* 但引出新的问题：表格重渲拖拽事件丢失，导致之后无法拖拽 * 于是我在表格重渲之后重新调用拖拽方法创建拖拽实例，功能正常 * **/ this.key

2.7K2 0

实现表格行的拖拽以及分页

背景在做一些后台管理系统时,表格的数据信息展示是很常见的需求,而对应的都是一些增删改查的操作有的表格甚至要求会做拖拽,排序等涉及到的知识 1: 如何渲染表头数据以及表格数据 2: 最右侧管理的按钮...(查看,编辑,上线,下线)是怎么插入进去的 3: 管理操作(查看,编辑,上线,下线)按钮的状态显示 4: 表格的分页数据展示 5: 表格的横向拖拽实现操作按钮状态它的状态是根据后端返回的具体status...) 点击文末左下方阅读原文即可体验 https://coder.itclan.cn/fontend/css/business-col-draw/ 行拖拽的具体实现这里的拖拽主要借用的是sortablejs...实现的,具体代码如下所示 import Sortable from 'sortablejs'; // 引入sortable // 拖拽方法 dropRow(endHandle) { const.../tableColist.js"; // 表格表头配置数据 import tableComp from ".

3K1 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

拖拽排序后端实现方案思考

看板软件，相信大多人都用过类似的软件，主要就是卡片拖动，卡片可以左右拖动，上下拖动，后端如何实现才能做到不用每次重排序号从而提高性能呢，在企业软件中也有很多树形和列表都是支持拖动排序的，这样设计比传统的上下直接移动可以提高效率...今天就来思考一下后端如何实现呢？...sort相等，从而导致排序失效； 2）判断调整一个元素到两个元素中间时时候，最终要更新拖拽sort加减1是否等于两个元素的值，如果等于了就立刻对数据进行重排；三、字符串排序此方式只能针对数据库唯一主键比较短...参考链接拖拽数据库设计方案小结-腾讯云开发者社区-腾讯云 teambition的任务卡排序，数据是怎么存储的？...- 知乎拖拽排序后端设计与实现 - 简书工作实践：拖拽排序的后端实现 - 掘金设计一个通用的排序方案，关于模糊中间数的计算思路 - 掘金使用React DnD实现列表拖拽排序-腾讯云开发者社区-

8971 0

基于Vue实现跨表格（单选、多选表格项，单表格限制）相互拖拽

前言今天，我们将使用Vue.js来实现一个跨表格相互拖拽。在开发这个业务之前呢，也调研了网上很多解决方案，但个人感觉不太符合现在做的这个需求。所以，压根就自己再开发一套，方便以后维护。什么需求呢？...就是多个表格之间可以实现相互拖拽，即A表格中的表格项可以拖拽到B表格，B表格的表格项可以拖拽到C表格，并且它们之间可以单选、多选表格项相互拖拽。...上面提到的A、B、C、D表格与下图游客、操作员、电工、管理员一一对应。此图非静止~ 实战既然，我们知道了要实现怎样的效果，那么我们就开工吧！第一步需要确定我们这个需求需要安装哪些依赖。...在utils文件夹中我们再创建两个文件：data.js与index.js。...电工表格、操作员表格只是多出来一个操作项。那就可以把它分成两个表格，操作项单独一个表格。只要监听电工表格或者操作员表格它们对应的数据长度就可以实现同步。为什么要分成两个表格呢?

3.8K2 1

JavaScript点击表格的表头，实现表格排序

现在很多vue/react等js框架配套的UI框架，表格自带点击表头排序的动能。后来小想了js/jq 手写的话，逻辑上如何实现。就写了个小demo，这里共享下。这是一个小白demo。.../jquery-2.0.3.min.js"> /** javaScript code....*/ 2）关于数据：数据就是个数组对象...具体的生成表格函数如下： function getbaseList(ary) { var html = ''; for (var i=0 ; i<ary.length...思路因为表格数据是遍历数组动态创建，所以可以考虑在点击表头的时候，对数据进行排序。对数据排序需要考虑两个关键点：对哪个字段进行排序？是正序（ASC）还是逆序（DESC）？...结语自此就完成了一个简易版点击表头排序，详细代码详见 table-sort.html。当然，这不是最简洁的方式，有看到小伙使用reverse()方法 JavaScript-点击表格的表头进行排序

4K1 0

使用React DnD实现列表拖拽排序

本文作者：IMWeb howenhuo 原文出处：IMWeb社区未经同意，禁止转载概述项目中需要对列表实现拖拽排序，同时要支持点击选中和删除功能。 ?...主要实现以下功能：鼠标hover到【列表项】，显示可【拖动图标】；抓取【拖动图标】并拖动，【列表项】跟随鼠标；拖动过程【其他列表项】自行挪动；拖动到目标位置，释放鼠标，完成排序；由于项目使用...React，因此用到 React DnD 来实现。...实现详解实现列表 components/List.js import React, { useState } from "react"; import { faTrashAlt, faArrowsAlt...详细用法请参考 React DnD 文档或 react-dnd 用法详解实现列表拖拽排序 components/DndList.js import React, { useState } from

9.7K4 1

原生JS实现拖拽缩放元素

今天给大家分享一个用原生JS实现的拖拽缩放元素大小的Demo，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。原生JS...实现拖拽缩放元素 #div1 { width: 11px; height: 11px;

5.5K2 0

原生JS实现拖拽位置预览

给大家分享一个拖拽元素时添加预览的小Demo，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。原生JS...实现拖拽位置预览 .box { position: absolute; border: 1px dashed

5.3K1 0

原生JS实现拖拽翻书特效

给大家分享一个用原生JS实现的拖拽翻书效果图，效果如下：效果还不错吧，当然还需要两个图片。 1.书本封面。 2.书页实现代码如下，欢迎大家复制粘贴。原生JS...实现拖拽翻书特效 body, h2, p { margin: 0;... js.../index.js"> 以下上面代码中引入的index.js代码，为核心代码。

8K1 0

js拖拽

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

5.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js实现表格拖拽排序

基础概念

相关优势

类型与应用场景

实现方法

示例代码

可能遇到的问题及解决方法

问题1：拖拽时页面滚动

问题2：兼容性问题

问题3：性能问题

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐