一个简单的可视化拖拽功能的实现，本人刚从大学毕业，步入工作一个月，公司领导要求开发一个可拖拽页面，开发一周后，我想总结一下开发过程中的技术和踩的一些坑。

接到一个新需求，要求用vue搞，主要是拖动实现布局，关键点有：单个组件拖动，一行多列里面的组件拖动， 单个组件可以拖入一行多列里， 单个组件的拖动好实现，关键是把一个组件拖动到另一个类似于表格里面，而且有的情况下还需要限制拖动只能在水平方向，自己搜集资料， 实验，终于搞出来了。…

虽然我这个可视化拖拽组件库只是一个 DEMO，但对比了一下市面上的一些现成产品（例如 processon、墨刀），就基础功能来说，我这个 DEMO 实现了绝大部分的功能。 如果你对于低代码平台有兴趣，但又不了解的话。强烈建议将我的三篇文章结合项目源码一起阅读，相信对你的收获绝对…

建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」如果你还没用过 drag 和 drop，可以通过本文了解下。

定义一个变量type，用于触发拖拽事件开始的时候，确定当前拖拽元素是哪种类型，比如：产品、广告图... 即松开鼠标、或离开释放区域，则恢复默认状态。 上方的计算规则，用于判断元素是否为拖拽元素。 页面的显示方式，拖拽的时候只显示组件名，释放之后才恢复正常显示内容。 其实并不复杂…

说到前端的拖拽很多前端开发人员会很烦，尤其是涉及到边缘判断这块，还有就是兼容性。学习前端之初我一直是使用onmousemove来实现拖拽的，下面展示要给传统的通过onmousemove实现的拖拽。 首先是给dom绑定一个mousedown事件，并且记录初始化光标相对于浏览器的坐…

拖放（drap && drop）在我们平时的工作中，经常遇到。它表示：抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。我从几个方面学习并实践这个功能。 然后，我们一步步看下这个过程中，会发生的事情。 在HTML5标准中，为了使元素可拖动，把draggable属性…

基于 vue ，下面代码部分直接添加为一个组件显示即可运行，是完整代码 业务痛点 固定类型数据展示页面重复开发 （活动页面重复开发） 需求改变频繁 开发时间短 开发人力不足 开发工作零碎 维护成本高