- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端 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表格拖拽
install sortablejs --save //引用 sorttablejs import Sortable from 'sortablejs' 2.用法 SorRow() { // 获取表格 (tbody, { animation: 150, //动画 handle: ".move", //指定拖拽目标，点击此目标才可拖拽元素(此例中设置操作按钮拖拽) filter SorCol() { //获取表格col的父节点 const eleCol = this. /** * 在做列拖拽功能时发现问题：表头位置错乱，但是内容列正常 * 于是我给el-table绑定key，每次拖拽结束改变key触发表格重新渲染 * 但引出新的问题：表格重渲拖拽事件丢失，导致之后无法拖拽 * 于是我在表格重渲之后重新调用拖拽方法创建拖拽实例，功能正常 * **/ this.key
3.4K20编辑于 2022-03-09 - 来自专栏向治洪
可拖拽gridview
的控件，GridView主要是来显示网格的控件，在Android的开发中使用很普通，相对于TextView，Button这些控件来说要来的复杂些，今天给大家带来长按GridView的item,然后将其拖拽其他 GridView的拖动的Demo，但是大部分都是相同的，而且存在一些Bug,而且大部分都是点击GridView的item然后进行拖动，或者item之间不进行实时交换，今天给大家更加详细的介绍GridView拖拽 镜像到屏幕上面，触发GridView向下滚动 GridView交换数据，刷新界面，移除item的镜像 看完上面的这些思路你是不是找到了些感觉了呢，心里痒痒的想动手试试吧，好吧，接下来就带大家根据思路来实现可拖拽的 item显示出来，这样子就实现了GirdView的拖拽效果啦，接下来我们来使用下我们自定义可拖拽的GridView吧，先看主界面布局，只有我们自定义的一个DragGridView <RelativeLayout 好了，今天的讲解就到此结束，效果还不错吧，看完这篇文章你是不是觉得GridView拖拽也不是那么难实现呢？
5.5K50发布于 2018-01-29 用JSHTMLCSS 构建可拖拽、可冻结、可编辑的原生交互式表格示例
本文深度解析一个完全基于HTML+CSS+JavaScript实现的现代表格系统——它不依赖任何框架（如React/Vue），却实现了双击编辑、冻结行列、拖拽排序、智能新增、多选操作等复杂功能，并通过精心设计的架构规避了常见陷阱 这不仅是一份代码，更是一套可复用的前端组件设计范式。说了这么多先上图看看结果：在主流的浏览器中运行本文附的代码得到以下图示效果一、为什么还要手写表格？ ：每个方法职责单一，易于单元测试（如getFrozenOffset()可独立验证）。 ✅响应式与可访问性使用--custom-properties统一主题色，便于定制；所有按钮含aria-label语义（可扩展）；支持键盘导航（Enter保存编辑，Escape取消）。五、如何扩展？ ;z-index:20;background:var(--header-bg);}/*数据行容器*/.div-body{display:flex;flex-direction:column;}/*行-可拖拽的实体
44021编辑于 2026-04-01可拖拽列表实现
需要做一个可复用的“网页可拖拽的列表排序”组件。从一开始，我就想：既要满足需求，高度封装；又得保证体验，视觉要足够现代精致。 “可拖拽的”。 为了未来还能扩展排序动画或同列表间拖拽，我把一些核心方法都挂在原型上，而非闭包里，这样便于继承与二次封装。 调试一整天后，我才意识到：最好把拖拽元素直接设置为 position: fixed; pointer-events: none; transform: translate3d(...) 在交互层面，拖拽项半透明并带有轻微的阴影，以示“正在被抓取”；占位节点则用淡灰色边框和虚线背景，视觉上既不显眼，又能给用户清晰提示。
58810编辑于 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 - 来自专栏大前端（横向跨端 & 纵向全栈）
原生JS实现可拖拽登录框
分享一个用原生JS实现的可拖拽登录框，效果如下： 实现的代码如下： <! <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现可拖拽登录框 //设定鼠标在X和Y方向的初始值为0 var mouseOffsetX = 0; var mouseOffsetY = 0; //是否可拖拽的标记 var isDraging = false; //鼠标事件1——计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可扡动 $('dialogDrag' pageWidth - dialogWidth; var maxY = pageHeight - dialogHeight; //做判断，防止拖拽出允许范围
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
5.2K10发布于 2020-11-03 - 来自专栏全栈程序员必看
android的layout_android可拖拽layout
每一个ViewGroup(例如LinearLayout, RelativeLayout, CoordinatorLayout, etc)需要存储有关其孩子view的属性信息。它的孩子view被放在ViewGroup，这些位置信息存储在一个包装类viewgroup.layoutparams对象中。
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 newIndex：目标位置对应行的索引 * oldIndex：被拖拽行的索引 * * ====================（被拖拽记录行 * ====================（被拖拽记录行2） * 如果从上往下拖拽，即newIndex > oldIndex，那么在目标位置对应记录行上移(目标位置对应记录行索引值减 1)，在newIndex所指位置插入被拖拽行(被拖拽行索引设置为newIndex)，视觉效果就是在after位置(即目标位置对应行下方)插入被拖拽行 * 如果从下往上拖拽，即newIndex < oldIndex，那么在目标位置对应记录行下移(目标位置对应记录行索引值加1)，在newIndex所指位置插入被拖拽行(被拖拽行索引设置为newIndex)，视觉效果就是在上述before位置(即目标位置对应行上方
4.1K10发布于 2021-02-25 - 来自专栏Creator星球游戏开发社区
Cocos Creator基础教程(11)—可拖拽组件
在游戏中实现节点的可拖动是一个比较常见情况，比如：可以给小朋友做一个将果皮投进垃圾箱的教学练习、角色换装、物品包裹界面等。 在Cocos Creator中实现一个可拖动组件，只需对目标节点拖拽配置就能让节点任意移动，这对策划、美术人员来说是不是很有杀伤力！ 1. 实现可拖拽组件 我们来看下组件代码非常简单，就算你不会编程，根着注释相信也能明白个大概： cc.Class({ extends: cc.Component, onLoad() {
5.5K31发布于 2019-09-11 - 来自专栏全栈程序员必看
Jquery实现可拖拽的树菜单「建议收藏」
server”> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Jquery 可拖拽树 var isDrageToRoot = false; //是否拖拽至顶级节点 //1.树Html初始化 var InitTreeHtml = “treeDemo”) { //为顶级文件夹拖拽至顶级不显示样式,【即顶级不能再拖拽至顶级】 $(rootUlId). $(“#zTreeMask_” + currentDrageNodeId).append($($currentAId).clone()); //推断当前拖拽的节点为展开目录则先把目录收缩再拖拽 不然鼠标移上节点又显示原来拖拽时的样式 【移动后(移除)再移上鼠标不能显示样式bug NOTDO】 $(“a”).unbind(“mouseover”).unbind
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 - 来自专栏Android知识点总结
Flutter 桌面探索 | 自定义可拖拽导航栏
菜单数据的状态管理 我们现在的菜单数据是写死的，对于可拖拽的功能，需要对这些数据进行修改和触发更新。所以菜单数据本身也就上升为了需要管理的状态。 如何拖动菜单 我们先来分析一下拖拽菜单的界面表现。如下所示，可将一个菜单拖拽出来，拖出的组件具有一定的透明度；另外当拖拽物达到目标时，目标底部会显示蓝线示意移至其下。 这里使用的是 Draggable 和 DragTarget 的组合，其中 Draggable 指的是可拖拽物体，DragTarget 指的是受体目标。 可以看出，其实这里导航菜单同时承担着这两种角色，既需要拖拽，又需要作为目标接收拖拽物，这就是可拖拽导航的一个小难点。 本文简单介绍了一下状态管理的使用价值，完成了一个简单的自定义可拖拽导航栏，相信从中你可以学到一些东西。后续会基于这个导航继续拓展，比如界面切换，支持添加移除等。那本文就到这里，谢谢观看~
3.1K20编辑于 2022-09-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号