- 综合排序
- 最热优先
- 最新优先
- 来自专栏码农的生活
JS实现拖拽代码
////html的代码说明： ////定义了一个table，用于测试js拖拽功能 <html> <head> <script type="text/javascript 100px" bgcolor="blue" style='left:120 ;top: 100;position:absolute'>
1 2< style='left:280 ;top: 100;position:absolute'> 1 dsa 2< 100px" bgcolor="green" style='left:400 ;top: 100;position:absolute'> 1 2< /td> 3 - 来自专栏web全栈
VisualDrag低代码拖拽模板
背景 接到一个需求做一个拖拽模板低代码生成界面（如上图），就是可以自定义界面元素拖拽生成页面，该页面需要可以存储，并且一比一还原。 因此得研究实现一个拖拽生成低代码平台，通过查询了各种资料，找到了以下比较合适的开源的低代码平台： visual-drag-demo：https://github.com/woai3c/visual-drag-demo 删除组件、调整图层层级 放大缩小 撤消、重做 组件属性设置 吸附 预览、保存代码 绑定事件 绑定动画 拖拽旋转 复制粘贴剪切 多个组件的组合和拆分 锁定组件 网格线 可以参考原作者大大的文档： 可视化拖拽组件库一些技术要点原理分析 user-select: none; &:active { cursor: grabbing; } &:hover { background-color: #d2d2d2 在 src\custom-component 目录下新建需要新增的组件文件夹 2).
2.1K20编辑于 2022-11-22 - 来自专栏前端 TS/JS 核心讲堂
原生JavaScript拖拽代码示例
本文将详细介绍如何使用 纯原生 JavaScript（无任何框架依赖） 实现一个支持单元格拖拽交换的 HTML 表格，并提供完整可运行的源代码。
单元格均可拖动；拖影层（Helper Layer）：一个绝对定位的 ，作为被拖单元格的视觉副本，跟随鼠标移动；状态管理：记录当前拖拽源、原始内容、偏移量及目标单元格；视觉反馈：拖拽源高亮为淡紫色 三、完整源代码以下为可直接运行的完整 HTML 文件，包含样式、结构与逻辑：<! 请大家引用时保留这段作者声明，此代码为开源代码；使用不受限制，欢迎大家采用本人所写JS动态拖动表格实现代码。 五、结语本实现以极简代码达成直观的拖拽交换体验，体现了原生 Web 技术的强大能力。它不仅适用于教学演示，也可作为企业级应用的基础模块。11721编辑于 2026-04-01<divclass="empty"> <divclass="empty"> <divclass="empty"> 2、编写CSS样式 接下来 ，有了这些基础后，我们就有了写出更复杂拖拽应用的基础。<divclass=" empty">来自专栏前端达人手写原生代码专题 | 图片拖拽效果（一）
二、 图片拖拽效果介绍 本篇文章，如下视频所示，界面有5个方格拖放区域，我们可以在这些区域里拖拽图片，当鼠标拖动图片时，图片周围有灰色的粗边框效果提示用户当前元素可拖动，在可放置图片的目标方格会出现白色的虚线边框并且背景色更改为黑色 三、拖拽相关知识复习 在练习前，我们先复习下和拖拽相关的几个API事件，在某个元素被拖动时，会按照顺序触发以下事件： dragstart（按住鼠标不放，刚开始拖动元素时，就会触发 dragstart 事件 （可调用拖拽API），示例代码如下： <divclass="empty"> <divclass="fill"draggable="true">
2.7K30发布于 2021-06-16来自专栏低代码（low code）专栏这款拖拽式低代码开发平台，真香！
低代码开发平台相较于传统软件开发，它的优点可以总结为“3低4快”，“3低”是指成本低、使用门槛低、风险低，“4快”是指沟通快、实施快、上线快、变更响应快。这也是低代码最让业界感到意外的地方。 今天推荐一款功能强大，能力边界广，而且能满足各类业务场景需求的低代码开发工具——织信Informat。 部署逻辑图系统组件清单组件类型描述账号数据库pgsql 13版本以上存储账号等公用数据低代码数据库pgsql 13版本以上存储低代码应用数据，支持分布式部署代理服务器nginx负载均衡服务器存储服务器 ，多机部署热备8C/32G/50G系统盘/200G数据盘织信微服务2织信微服务集群，多机部署热备4C/16G/50G系统盘/200G数据盘缓存服务2redis，多机部署热备4C/16G/50G系统盘/2T 数据盘中间件服务2rabbitMQ、elastic-search、minio、onlyoffice，多机部署热备4C/16G/50G系统盘/2T数据盘数据库2postgresql，多机部署热备超过1000
1.1K20编辑于 2023-08-04来自专栏React可视化React可视化拖拽组件编辑代码生成
mobile.png pc.png 特性： 任意拖拽嵌套：通过组件预览面板拖拽组件，到设计面板实现任意嵌套，设计面板中的组件也可随意拖拽嵌套 实时预览：设计面板中会实时展示组件的属性效果和样式效果， 通过样式配置面板修改样式，实时在页面中显示样式效果 模板功能：可以选中局部或者整个页面做为可复用的模板，提高页面配置效率减少重复工作 组件约束：根据组件特性配置组件约束，减少组件间的错误嵌套和报错 预览与代码生成 ：可随时预览页面的真实效果，和页面的jsx代码与样式代码 多平台支持 ：支持PC与移动端多型号设配切换展示 组件库替换 ：通过简单的配置可以对接任何React组件库 github地址 在线预览
3.9K30发布于 2020-02-27来自专栏前端 TS/JS 核心讲堂js拖拽-javascript拖拽缩放示例
本文将系统讲解 原生 JavaScript 实现拖拽功能的核心原理、完整代码示例、常见问题及高级技巧。 ❌ 移动端兼容性差方式 2：基于 mousedown mousemove mouseup 的自定义拖拽（推荐用于 UI 组件内部拖拽）✅ 完全可控，性能高✅ 可精细控制动画、边界、吸附等效果✅ 兼容性极佳 （包括移动端 touch 事件）❌ 需手动处理所有逻辑本文重点讲解方式 2 —— 这也是你在表格、看板、列表排序中最常用的实现。 “抓”在点击点 在 document 上监听 mousemove/mouseup 避免鼠标移出元素后失效三、高级拖拽：可拖拽、可冻结、可编辑、可排序如我早期另一篇文章-用JS/HTML/CSS 构建可拖拽 拖拽缩放示例（逻辑/数据/展现分离）</h2>
14521编辑于 2026-04-01拖拽RecyclerView
挥别第三方库：原生ItemTouchHelper掌控RecyclerView拖拽与侧滑原始译文参考：开发技术前线（原作者：PaulBurke/译者：objectlife）如果你还在使用残破累赘的第三方库 （比如早期的SwipeToDismiss）或者深陷于手写GestureDetector和onInterceptTouchEvent的泥沼来处理列表的侧滑删除和长按拖拽，那你需要立刻停下。 本文将展示如何用极简的代码在RecyclerView中解封这项强悍能力。[! 不仅仅是手势的剥离，它直接掌控了拖拽中悬浮视图的z-轴阴影（elevation抬升）、回位动画轨迹（dropsettling）甚至支持自定义约束方向。 这也引申出了极度严苛的代码规范：你的数据模型更新（mItems的维护）必须与notifyItemXXX保持绝对的一致且原子级同步！
5610编辑于 2026-04-25来自专栏用户9257747的专栏腾讯低代码神器开源！拖拽开发，爽的飞起~
腾讯tmagic-editor是一个所见即所得的页面可视化编辑器，实现零代码/低代码生成页面，可以快速搭建可视化页面生产平台，让非技术人员可以通过拖拽和配置，自助生成H5页面、PC页面、TV页面，大大降低页面生产成本 业务组件可以用不同的前端框架实现，如vue2、vue3、react。 编排 这里指通过对组件的拖拽和配置，完成页面编辑，主要由非技术人员完成。 构建： 构建模块基于runtime代码，对组件进行打包构建，生成html、js、css文件。 包括左侧侧边栏、组件列表展示、已选组件的组件树、中间的页面拖拽的画布区域（也叫模拟器）、右侧表单配置区域、正中间上方的画布控制区域（放大缩小、网格线显隐）、预览、保存、查看源码（js schema描述的 部署可视化搭建服务 tmagic-editor提供的是开源代码，并不是一个saas服务，因此业务需要自己部署可视化搭建平台的服务。
2K20编辑于 2023-09-18来自专栏coding个人笔记js拖拽
开发了那么久，对于js实现拖拽多少都写过，用于实际项目却没有。 先看一下之前写的： 如果鼠标慢慢移动，拖拽是没有任何问题的，如果速度快了，那么鼠标和元素就会分离。 最后贴上代码： <!
6.9K30发布于 2020-04-24来自专栏用户7873631的专栏js拖拽
/*js拖拽逻辑: 第一：为什么要定位? 因为 ? 往左往上left top要定位的哈 第二：为什么点击down包括着移动move与抬起up. 因为代表这三个是不独立的. 因为鼠标移动是在document移动,点击是在div上点击.其实一句话,鼠标移动div跟着移动而已. */ 核心代码： ? 鼠标是400.那样的话,400-(150-100)=350.就是div所在的位置.也就是move后的位置. js拖拽: <!
6.1K41发布于 2020-10-30来自专栏用户7873631的专栏js拖拽
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding: 0;;list-style: none;} #div{width: 100px;height: 100px;background: black;position: absolute;} </style> </head> <body> asdj
6.6K10发布于 2020-10-28来自专栏全栈程序员必看JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div（1）解决问题，当在拖拽事件所在的页面按下键盘的ctrl+A全选后，再去拖拽div，浏览器会默认去搜索网页中的内容，拖拽功能就会失效，（搜索网页内容是浏览器的默认行为，所以要想不发生这种情况 例如： btn.onclick = function(){ alert(1); }; btn1.onclick = function(){ alert(2); }; 可以将setCapture()方法用到鼠标拖拽div的例子中，但是注意，在给mousedown事件中，调用的box的**setCapture()方法之后，会有一个问题，就是当鼠标松开之后，事件还会一直被捕获 优化拖拽代码 在之前拖拽div的代码中，如果要拖拽多个内容，就需要重新为一个内容绑定事件，所有的操作都要重新写一遍，所以对之前的代码进行了优化： 定义函数，将拖拽的方法封装起来，方便调用，要拖拽哪个元素 优化后的代码如下： <!
3.2K20编辑于 2022-08-24来自专栏sofu456winform 文件拖拽
winform 重写函数，而不是控件委托事件 protected override void OnDragDrop(DragEventArgs drgevent) protected override
2.3K20发布于 2020-10-28来自专栏向治洪可拖拽gridview
GridView，新建一个项目就叫DragGridView 新建一个类DragGridView继承GridView,先来看看DragGridView的代码，然后在根据代码进行相关的讲解 package mPoint2ItemTop 手指按下的点到该Item的上边缘的距离，如上图的1号线 mPoint2ItemLeft 手指按下的点到该Item的左边缘的距离，如上图的2号线 mOffset2Top DragGridView 你心里是不是也大概有自己的一个思路，建议大家自己敲敲看看，可以自己去实现下ListView的拖拽实现，ListView比GridView简单些，好的学习方法不是看得懂人家的代码，而是看完代码自己根据脑海里的思路自己敲出来 ，所以还是鼓励大家多敲代码，不明白的同学在下面留言，我会为大家解答的！ 项目源码，点击下载 PS:上面的代码在4.0以上的机器上面运行是OK的，但是在4.0以下的机器存在几个问题，首先是兼容性的问题，首先smoothScrollToPositionFromTop()方法在2
5.5K50发布于 2018-01-29</body> </html> <script> window.onload = function () { // 获取拖拽的节点 let drag = document.getElementById('drag') // console.log(drag); // 按下别拖拽对象的时候来自专栏编程内马尔原生JS拖拽
IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS拖拽 class="box" id="drag">
16K40编辑于 2022-11-15来自专栏万丈高楼平地起table表格拖拽
sortable //安装sortablejs npm install sortablejs --save //引用 sorttablejs import Sortable from 'sortablejs' 2. (tbody, { animation: 150, //动画 handle: ".move", //指定拖拽目标，点击此目标才可拖拽元素(此例中设置操作按钮拖拽) filter /** * 在做列拖拽功能时发现问题：表头位置错乱，但是内容列正常 * 于是我给el-table绑定key，每次拖拽结束改变key触发表格重新渲染 * 但引出新的问题：表格重渲拖拽事件丢失，导致之后无法拖拽 * 于是我在表格重渲之后重新调用拖拽方法创建拖拽实例，功能正常 * **/ this.key del: "删除", }, { roleId: 20002, roleName: "咯阿时候2"
3.4K20编辑于 2022-03-09</transition-group> </draggable> 2个组件左右结构 ，此代码真实有效 document.body.ondrop = function (event) { event.preventDefault(); event.stopPropagation(); } ghostClass{ opacity: 1; } .bottom{ width: 200px; height: 50px; position: relative; background: blue; top:2px ; left: 2px; transition: all .5s linear; } </style> options配置如下 var sortable = new Sortable(el, { group来自专栏全栈程序员必看vuedraggable自由拖拽_vue可视化拖拽编辑
最近做的项目要用到拖拽排序，我现在的项目是vue项目，所以我就屁颠屁颠的去百度有木有这样功能的插件，我就知道一定会有，那就是vuedraggable，这是一款很棒的拖拽插件，下面我来说一下怎么引入 首先在 :key="element.text" class = "drag-item"> {{element.text}}
2.6K40编辑于 2022-09-20写代码太累？这款低代码平台，拖拖拽拽就能上线业务系统
前言如今的软件开发，早已不是写几行代码、搭个页面那么简单。业务需求天天变，报表要加字段，权限要隔离，手机端还得适配……不少团队在“改需求—写代码—测功能—返工”的循环里疲于奔命。 答案其实早就有了,低代码平台。而今天要聊的，是一款基于SpringBoot构建、真正面向企业场景的开源低代码框架：JeeLowCode。 通过拖拽式布局，用户可以像搭积木一样组合出复杂的页面，甚至能配置多表关联、字段格式化、动态排序等高级功能，完全不用碰一行前端代码。 整个架构既保持了低代码的易用性，又没有牺牲扩展能力，适合中大型企业长期使用。 从克隆代码到跑起来，大概只需十几分钟。官方还贴心地提供了环境工具包，进一步降低上手门槛。
42010编辑于 2025-11-25来自专栏coding个人笔记vue拖拽指令
自己一直很想做个拖拽生成静态页面的东西，说简单也简单，这个东西按道理用jsx语法是最好的，用render方法渲染生成的json。只是自己对这块还是没信心。 今天写个vue的拖拽指令，顺便理一下offsetX、pageX、clientX、screenX这几个属性，一直记不住。 搞明白了这几个相对的距离，就比较容易计算拖拽的距离了。 很早之前就分享过拖拽的一个简单demo，拖拽指令也很简单 Vue.directive('draggable', { inserted: function (el,data) { el.style.position 使用的时候：
请拖拽这是最基础版的，不同需求可能会有不一样的条件，比如移动的距离是否可以小于0，或者限制在某个相对定位relative框里面，这时候是否限制最大最小的移动距离1.4K10发布于 2021-01-24腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号