- 综合排序
- 最热优先
- 最新优先
用 VueReact 搭建简易低代码编辑器：组件拖拽原理
用 Vue/React 搭建简易低代码编辑器：组件拖拽原理 目标：实现一个基础的低代码拖拽搭建能力，包含组件面板、画布、落点占位、网格吸附、选中与属性配置、JSON Schema 持久化。 本文聚焦拖拽交互与数据结构设计，分别提供 Vue 与 React 的最小实现示例。 架构与数据模型 核心模块 组件面板：可拖拽的物料 画布：接收拖入与移动的区域 选中与属性面板：编辑节点属性 存储层：以 JSON Schema 持久化 基础数据结构 { "nodes": [ 拖拽中的关键细节 占位与对齐参考线 计算当前节点与其他节点的边界对齐位置，显示参考线 网格与磁吸 支持切换不同步长，或在按住辅助键时禁用吸附 边界与滚动 拖拽到画布边缘时自动滚动 框选与多选 记录拖拽框的起点终点 使用 Pointer 代替 Drag API，或启用长按再拖拽 选区与节点交互冲突 优先级区分：拖拽捕获优先于点击选择 组合对齐与分布 多选后提供对齐与分布动作，批量更新 layout 总结 实现一个简易低代码编辑器的核心在拖拽坐标
34610编辑于 2025-12-15- 来自专栏Cell的前端专栏
如何实现 VSCode 编辑器窗口边界拖拽类似功能
边界拖拽调整窗口大小功能是一个很常见的功能，比如浏览器、编辑器等很多场景都有应用，这种功能不仅提高了用户体验，也增强了应用的灵活性。 实现边界拖拽调整窗口大小功能，主要是通过鼠标按下、移动、松开事件来实现的，主要思路如下： 在 mousedown 事件中，我们记录下鼠标的初始位置和元素的初始宽度。 同时，我们还需要根据鼠标位置的变化，动态更新鼠标样式，以提示用户当前的拖拽状态。 在 mouseup 事件中，我们清除之前设置的事件监听器，并恢复鼠标样式。 为了鼠标移动到可拖拽边界时显示一条蓝色的线，但是又不想改变元素的宽度，所以 resize-bar 元素的使用了 position: absolute，并且设置了 translateX(-50%) 来让其居中显示 正是因为第二点的实现方式，使得在边界线左右两侧都能拖拽，这一点是优于 VSCode 的，因为 VSCode 只能在左侧拖拽 。
68010编辑于 2024-06-18 - 来自专栏用户2276240的专栏（3）
js拖拽-javascript拖拽缩放示例
一、两种主流实现方式方式 1：使用 HTML5 原生 Drag & Drop API（推荐用于跨容器拖拽）✅ 标准化，浏览器原生支持✅ 支持文件拖入、跨 iframe 拖拽❌ 事件模型复杂，样式控制受限 ❌ 移动端兼容性差方式 2：基于 mousedown mousemove mouseup 的自定义拖拽（推荐用于 UI 组件内部拖拽）✅ 完全可控，性能高✅ 可精细控制动画、边界、吸附等效果✅ 兼容性极佳 “抓”在点击点 在 document 上监听 mousemove/mouseup 避免鼠标移出元素后失效三、高级拖拽：可拖拽、可冻结、可编辑、可排序如我早期另一篇文章-用JS/HTML/CSS 构建可拖拽 总结 场景推荐方案表格行/列排序、看板卡片移动✅ mousedown + mousemove 自定义拖拽文件上传、跨应用拖拽⚠️ HTML5 Drag & Drop API复杂物理效果（ 磁吸、弹簧） 结合 requestAnimationFrame + 自定义逻辑记住核心公式： 拖拽位置 = 鼠标当前位置 - 初始偏移量掌握这一原则，你就能构建任何拖拽交互。
12921编辑于 2026-04-01 - 来自专栏coding个人笔记
js拖拽
开发了那么久，对于js实现拖拽多少都写过，用于实际项目却没有。 先看一下之前写的： 如果鼠标慢慢移动，拖拽是没有任何问题的，如果速度快了，那么鼠标和元素就会分离。
6.8K30发布于 2020-04-24 - 来自专栏用户7873631的专栏
js拖拽
/*js拖拽逻辑: 第一：为什么要定位? 因为 ? 往左往上left top要定位的哈 第二：为什么点击down包括着移动move与抬起up. 因为代表这三个是不独立的. 鼠标是400.那样的话,400-(150-100)=350.就是div所在的位置.也就是move后的位置. js拖拽: <!
6K41发布于 2020-10-30 - 来自专栏bubucuo
从0到1开发可视化拖拽H5编辑器(React)
接下来按照完成功能点介绍下，主要包括： 编辑器 状态管理 自定义生成组件（目前完成文本、按钮、图片组件） 拖拽 组件属性编辑 放大、缩小 删除组件、调整图层层级 撤销、重做 动画 生成器 介绍 lowcode 这个项目可以分成两部分，一部分是编辑器，一部分是生成器。编辑器用于生成页面，其实就是生成一个包含页面所有组件信息的对象值，如下： 然后可以把这个对象转成字符串存入数据库，对应一个id。 style记录了组件的样式style 编辑器 首先，我们先来看下编辑器的布局，这里可以分成四个大模块： 这个时候代码如下： export default function App() { return 知道了我们要搭建一个怎么样的编辑器之后，接下来我们需要考虑一件重要的事情，就是画布数据放哪儿？ 拖拽组件 画布上的组件需要是可拖拽的，通过拖拽控制位置，这个时候其实就是获取x与y轴上的移动距离，那么只需要用这次位置减去初始值位置就可以了。
2.9K50编辑于 2022-09-16 - 来自专栏用户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 - 来自专栏sofu456
winform 文件拖拽
winform 重写函数，而不是控件委托事件 protected override void OnDragDrop(DragEventArgs drgevent) protected override
2.3K20发布于 2020-10-28 - 来自专栏向治洪
可拖拽gridview
的控件，GridView主要是来显示网格的控件，在Android的开发中使用很普通，相对于TextView，Button这些控件来说要来的复杂些，今天给大家带来长按GridView的item,然后将其拖拽其他 GridView的拖动的Demo，但是大部分都是相同的，而且存在一些Bug,而且大部分都是点击GridView的item然后进行拖动，或者item之间不进行实时交换，今天给大家更加详细的介绍GridView拖拽 position */ private int mDragPosition; /** * 刚开始拖拽的item对应的View */ private item显示出来，这样子就实现了GirdView的拖拽效果啦，接下来我们来使用下我们自定义可拖拽的GridView吧，先看主界面布局，只有我们自定义的一个DragGridView <RelativeLayout 好了，今天的讲解就到此结束，效果还不错吧，看完这篇文章你是不是觉得GridView拖拽也不是那么难实现呢？
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
让Web页面中的编辑器支持黏贴或直接拖拽来添加图片「建议收藏」
} 82 ; 83 84 //绑定拖拽事件 new Edit("#edit"); 141 </script> 142 </body> 143 </html> View Code 参考资料： 让编辑器支持
vuedraggable自由拖拽_vue可视化拖拽编辑
最近做的项目要用到拖拽排序，我现在的项目是vue项目，所以我就屁颠屁颠的去百度有木有这样功能的插件，我就知道一定会有，那就是vuedraggable，这是一款很棒的拖拽插件，下面我来说一下怎么引入 首先在 evt.oldIndex) console.log('拖动后的索引 :' + evt.newIndex) console.log(this.colors); } }, mounted () { //为了防止火狐浏览器拖拽的时候以新标签打开
table表格拖拽
el-table 的拖拽使用 Sortable.js 官方文档 :https://github.com/SortableJS/Sortable 1. (tbody, { animation: 150, //动画 handle: ".move", //指定拖拽目标，点击此目标才可拖拽元素(此例中设置操作按钮拖拽) filter : ".disabled", //指定不可拖动的类名（el-table中可通过row-class-name设置行的class） dragClass: "dragClass", //设置拖拽样式类名 /** * 在做列拖拽功能时发现问题：表头位置错乱，但是内容列正常 * 于是我给el-table绑定key，每次拖拽结束改变key触发表格重新渲染 * 但引出新的问题：表格重渲拖拽事件丢失，导致之后无法拖拽 * 于是我在表格重渲之后重新调用拖拽方法创建拖拽实例，功能正常 * **/ this.key
Cypress实现拖拽
使用Cypress内置的trigger方法实现拖拽一个元素到另一个同类型元素，实现排序 Typescript实现方法： export function dragAndDrop(sourceLocator
vue拖拽指令
自己一直很想做个拖拽生成静态页面的东西，说简单也简单，这个东西按道理用jsx语法是最好的，用render方法渲染生成的json。只是自己对这块还是没信心。 今天写个vue的拖拽指令，顺便理一下offsetX、pageX、clientX、screenX这几个属性，一直记不住。 搞明白了这几个相对的距离，就比较容易计算拖拽的距离了。 很早之前就分享过拖拽的一个简单demo，拖拽指令也很简单 Vue.directive('draggable', { inserted: function (el,data) { el.style.position 使用的时候：
Js拖拽事件
oDrag.style.left=l+'px'; oDrag.style.top =t+'px'; } </script> </body> </html> 知识点： 用class获取元素封装; 学习mouseover事件; 常见拖拽
Cypress实现拖拽
使用Cypress内置的trigger方法实现拖拽一个元素到另一个同类型元素，实现排序typescript实现方法：export function dragAndDrop(sourceLocator:
简单拖拽实现
拖拽的元素必须绝对定位。 在实际操作中，犯了一个简单的错误： 对于iframe元素的事件绑定，需要在src完全加载后进行绑定。 1 var Drag = function(el,minX,maxX,minY,maxY){ 2 // 拖拽元素 3 //el: 拖拽元素 4 //minX: X轴最小边界 5 //minY: Y轴最小边界 6 //maxX: X轴最大边界 7
JS实现拖拽代码
////html的代码说明： ////定义了一个table，用于测试js拖拽功能 <html> <head> <script type="text/javascript table> <tr> <td> </tr> </table> </pre> ////js代码说明： ////currentMoveObj ：全局对象，记录当前<em>拖拽</em>的那个对象 currentMoveObj.style.pixelLeft; relTop = event.y - currentMoveObj.style.pixelTop; } /////当鼠标松开时，当前<em>拖拽</em>对象置空 ，始终更新当前<em>拖拽</em>对象的坐标即可 function mouseMove() { if(null ! function(){ mouseDown(obj)}; obj.onmousemove= function(){ mouseMove()}; } </script> </pre> <p>JS<em>拖拽</em>
winform 文件拖拽dragdrop
winform 重写函数，而不是控件委托事件 protected override void OnDragDrop(DragEventArgs drgevent) protected override
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号