- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端 TS/JS 核心讲堂
原生js实现可拖拽表格
其中，通过拖拽直接交换单元格内容是一种直观、高效的操作方式，广泛应用于课程表编排、任务看板、配置管理等场景。 本文将详细介绍如何使用纯原生 JavaScript（无任何框架依赖）实现一个支持单元格拖拽交换的 HTML 表格，并提供完整可运行的源代码。<! UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>现代 JS 动态拖动表格实现 >
<script> /** * created by yzh 2002.4.12 * 可以实现表格内容的内部拖动 * 确保中间过度层的存在，id为指定 * 请大家引用时保留这段作者声明，此代码为开源代码；使用不受限制，欢迎大家采用本人所写JS动态拖动表格实现代码。16020编辑于 2026-03-31 - 来自专栏万丈高楼平地起
table表格拖拽
(tbody, { animation: 150, //动画 handle: ".move", //指定拖拽目标，点击此目标才可拖拽元素(此例中设置操作按钮拖拽) filter /** * 在做列拖拽功能时发现问题：表头位置错乱，但是内容列正常 * 于是我给el-table绑定key，每次拖拽结束改变key触发表格重新渲染 * 但引出新的问题：表格重渲拖拽事件丢失，导致之后无法拖拽 * 于是我在表格重渲之后重新调用拖拽方法创建拖拽实例，功能正常 * **/ this.key important; } </style> 3.实际使用 <template>
<el-table :data="tableData del: "删除", }, { roleId: 20003, roleName: "咯阿时候3"3.4K20编辑于 2022-03-09来自专栏向治洪可拖拽gridview
镜像到屏幕上面，触发GridView向下滚动 GridView交换数据，刷新界面，移除item的镜像 看完上面的这些思路你是不是找到了些感觉了呢，心里痒痒的想动手试试吧，好吧，接下来就带大家根据思路来实现可拖拽的 ; //获取DragGridView自动向下滚动的偏移量，大于这个值，DragGridView向上滚动 mUpScrollBorder = getHeight() * 3/ 的上边缘的距离，如上图的1号线 mPoint2ItemLeft 手指按下的点到该Item的左边缘的距离，如上图的2号线 mOffset2Top DragGridView的上边缘到屏幕上边缘的距离，如上图的3号线 item显示出来，这样子就实现了GirdView的拖拽效果啦，接下来我们来使用下我们自定义可拖拽的GridView吧，先看主界面布局，只有我们自定义的一个DragGridView <RelativeLayout horizontalSpacing="10dip" android:stretchMode="columnWidth" android:gravity="center" android:numColumns="<em>3</em>"
5.5K50发布于 2018-01-29用JSHTMLCSS 构建可拖拽、可冻结、可编辑的原生交互式表格示例
本文深度解析一个完全基于HTML+CSS+JavaScript实现的现代表格系统——它不依赖任何框架（如React/Vue），却实现了双击编辑、冻结行列、拖拽排序、智能新增、多选操作等复杂功能，并通过精心设计的架构规避了常见陷阱 这不仅是一份代码，更是一套可复用的前端组件设计范式。说了这么多先上图看看结果：在主流的浏览器中运行本文附的代码得到以下图示效果一、为什么还要手写表格？ 3.拖拽排序：支持多行/单行+智能插入位置不同于简单dragstart/drop，本系统实现了：✅多行拖拽：选中多行后拖拽，整体移动；✅防自循环：if(fromIndices.includes(toIdx ;z-index:20;background:var(--header-bg);}/*数据行容器*/.div-body{display:flex;flex-direction:column;}/*行-可拖拽的实体 安全保护</h3>
- 冻结行列：完全禁用事件监听
- 删除操作：严格校验冻结状态
- 拖拽保护：冻结时自动禁止
- 新增位置：智能判断选中位置 <
44121编辑于 2026-04-01可拖拽列表实现
需要做一个可复用的“网页可拖拽的列表排序”组件。从一开始，我就想：既要满足需求，高度封装；又得保证体验，视觉要足够现代精致。 “可拖拽的”。 为了未来还能扩展排序动画或同列表间拖拽，我把一些核心方法都挂在原型上，而非闭包里，这样便于继承与二次封装。 调试一整天后，我才意识到：最好把拖拽元素直接设置为 position: fixed; pointer-events: none; transform: translate3d(...) pointer-events: none; will-change: transform; } 在 JS 里对应地，我改用 element.style.transform = 'translate3d
58910编辑于 2025-05-06来自专栏javafx框架tornadofx创建可拖拽的控件
dragableControl.gif class DraggablePanelsView : View("Draggable Panels") { override val root = borderpane { center = pane { add( makeDraggable(LoginFrag().root as Node).apply { relocate(0
2.2K40发布于 2019-12-25来自专栏授客的专栏Easyui datagrid 实现表格记录拖拽
})(jQuery); 关键代码 引入js文件 <script type="text/javascript" src="website/js/datagrid-dnd.js"></script> 定义表格 ，返回 false 则取消拖拽。 sourceRow：拖拽的源行。 point：指示放置的位置，可能的值：'top' 或 'bottom'。 <body> <! = undefined) { // 处于正在编辑状态,取消拖拽 return false; } } // 停止拖拽，释放鼠标，提交目标行，被拖拽行，拖拽方向灯相关数据到服务器 top or bottom，都需要考虑拖拽到目标行记录上方及目标行记录上方。
1.7K20发布于 2019-09-10来自专栏itclanCoder实现表格行的拖拽以及分页
背景 在做一些后台管理系统时,表格的数据信息展示是很常见的需求,而对应的都是一些增删改查的操作 有的表格甚至要求会做拖拽,排序等 涉及到的知识 1: 如何渲染表头数据以及表格数据 2: 最右侧管理的按钮 (查看,编辑,上线,下线)是怎么插入进去的 3: 管理操作(查看,编辑,上线,下线)按钮的状态显示 4: 表格的分页数据展示 5: 表格的横向拖拽实现 操作按钮状态 它的状态是根据后端返回的具体status handle: '.drop_handle', onEnd: endHandle, }); } }, // 在mounted函数中 // 表格拖拽 /tableComp.vue"; import Sortable from 'sortablejs'; // 表格拖拽 export default { components: { tableComp this.pageNo = this.getStorageData("currentPage") || 1; }, mounted() { this.mockTableData(); // 表格拖拽
3.6K10编辑于 2021-12-06来自专栏前端历劫之路基于Vue实现跨表格（单选、多选表格项，单表格限制）相互拖拽
前言 今天，我们将使用Vue.js来实现一个跨表格相互拖拽。在开发这个业务之前呢，也调研了网上很多解决方案，但个人感觉不太符合现在做的这个需求。所以，压根就自己再开发一套，方便以后维护。 什么需求呢？ 就是多个表格之间可以实现相互拖拽，即A表格中的表格项可以拖拽到B表格，B表格的表格项可以拖拽到C表格，并且它们之间可以单选、多选表格项相互拖拽。 是因为，如果你从游客这个表格拖入到操作员这个表格，因为在游客表格没有操作这个选项，所以当你拖入到操作员表格时，就不会有操作这个选项（这是因为使用的拖拽的插件只是复制对应Node节点）。那肯定不行啊！ Sortable.create(el,{}) 这里，需要给Sortable对象下的create方法传入两个参数，第一个参数是el节点，这个节点是定义可拖拽的每一项，如: const el = this 这个方法做了两个工作，一是定义一个开始拖拽时记录当前表格的标识，二是将当前表格的数据克隆到新数组中。
4.3K21发布于 2021-12-01来自专栏跟Qt君学编程Qt官方示例-可拖拽本文
source() == this) { event->setDropAction(Qt::MoveAction); event->accept(); /* 接受拖拽事件 mime->data(hotSpotMimeDataKey()).split(' '); if (hotSpotPos.size() == 2) { /* 松开拖拽设置为当前位置 source() == this) { event->setDropAction(Qt::MoveAction); event->accept(); /* 接受拖拽事件
97940发布于 2019-10-09来自专栏码农的生活d3.js画矢量图+可拖拽的实现思路
<meta charset="utf-8"> <title>Arrow</title> </head> <body> <script src="d<em>3</em>. v<em>3</em>.min.js" charset="utf-8"></script> <script> var width = 400; var height = 400; var svg = d3.select
3.2K11发布于 2021-09-23来自专栏大前端（横向跨端 & 纵向全栈）原生JS实现可拖拽登录框
分享一个用原生JS实现的可拖拽登录框，效果如下： 实现的代码如下： <! <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现可拖拽登录框 .ui-dialog-submit { width: 100%; height: 50px; background: #3b7ae3 //设定鼠标在X和Y方向的初始值为0 var mouseOffsetX = 0; var mouseOffsetY = 0; //是否可拖拽的标记 var isDraging = false; //鼠标事件1——计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可扡动 $('dialogDrag'
5.4K20发布于 2020-11-26来自专栏前端黑板报Element-UI表格组件实现行拖拽排序
前言 运营小姐姐说想要可以直接拖拽排序的功能，原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置，拖拽操作就很方便 ? 效果 ?
5.1K20发布于 2020-09-01来自专栏前端之攻略Element UI 中 dialog 可拖拽实现方法
一-在utils文件夹下新建dialogDrag.js文件，创建自定义指令 import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag v-model="testDialog.input2" placeholder="请输入内容"></el-input> <el-input v-model="testDialog.input<em>3</em>"
5.2K10发布于 2020-11-03来自专栏全栈程序员必看android的layout_android可拖拽layout
携带了子控件针对父控件的信息，告诉父控件如何放置自己 LayoutParams类也只是简单的描述了宽高，宽和高都可以设置成三种值： 1，一个确定的值； 2，FILL_PARENT，即填满(和父容器一样大小)； 3，
85310编辑于 2022-11-08来自专栏授客的专栏ElementUI 基于vue+sortable.js实现表格行拖拽
基于vue+sortable.js实现表格行拖拽 实践环境 sortablejs@1.13.0 vue@2.6.11 element-ui@2.13.2 安装sortable.js拖拽库 npm install address: "上海市普陀区金沙江路 1517 弄2" }, { date: "2016-05-01", name: "王小虎3" , address: "上海市普陀区金沙江路 1519 弄3" }, { date: "2016-05-03", * ====================（被拖拽记录行2） * 如果从上往下拖拽，即newIndex > oldIndex，那么在目标位置对应记录行上移(目标位置对应记录行索引值减 1)，在newIndex所指位置插入被拖拽行(被拖拽行索引设置为newIndex)，视觉效果就是在after位置(即目标位置对应行下方)插入被拖拽行 * 如果从下往上拖拽，即newIndex
4.1K10发布于 2021-02-25来自专栏Creator星球游戏开发社区Cocos Creator基础教程(11)—可拖拽组件
在游戏中实现节点的可拖动是一个比较常见情况，比如：可以给小朋友做一个将果皮投进垃圾箱的教学练习、角色换装、物品包裹界面等。 在Cocos Creator中实现一个可拖动组件，只需对目标节点拖拽配置就能让节点任意移动，这对策划、美术人员来说是不是很有杀伤力！ 1. 实现可拖拽组件 我们来看下组件代码非常简单，就算你不会编程，根着注释相信也能明白个大概： cc.Class({ extends: cc.Component, onLoad() { 3.
5.5K31发布于 2019-09-11来自专栏全栈程序员必看Jquery实现可拖拽的树菜单「建议收藏」
server”> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Jquery 可拖拽树 = “treeDemo”) { //为顶级文件夹拖拽至顶级不显示样式,【即顶级不能再拖拽至顶级】 $(rootUlId).
实现移动 3.释放时remove//实现方法:1.mousedown 2.mousemove 3.mouseover 4.mouseup $(“#zTreeMask_” + currentDrageNodeId).append($($currentAId).clone()); //推断当前拖拽的节点为展开目录则先把目录收缩再拖拽 [原来] } //3.5.1K30编辑于 2022-07-10来自专栏程思阳的专栏Android笔记： 使用RecyclerView打造可拖拽的GridView
如果我们设置了非0的dragFlags ，那么当我们长按item的时候就会进入拖拽并在拖拽过程中不断回调onMove()方法，我们就在这个方法里获取当前拖拽的item和已经被拖拽到所处位置的item的ViewHolder 到这里，已经可以拖拽了，但是拖拽的时候我们拖拽的对象不能高亮显示，这是不友好的，我们希望拖拽的Item在拖拽的过程中背景颜色加深，这样就需要继续重写下面两个方法： //当长按选中item的时候（ super.clearView(recyclerView, viewHolder); viewHolder.itemView.setBackgroundColor(0); } OK，这样就完成了一个可拖拽的 更加复杂的需求 上面的代码完成了基本功能，但实际的产品需要往往可能会有些不一样，比如说，产品希望，有一些item可以拖拽，一些item无法拖拽，就如上图的“更多”是无法拖拽的。这个咋办呢？ 详见demo 开始拖拽时震动 支付宝的拖拽网格在长按后开始拖拽时会有一次短时间的震动提示用户开始拖拽了，很友好的交互，我们也加一个： 添加权限： <uses-permission android:name
2.5K31编辑于 2022-01-11来自专栏直播知识短视频程序源码，实现选中可拖拽功能
</head> <body>
<script> var oDiv = document.querySelector("div");//首先获取要拖拽的68230发布于 2020-09-27腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号