说到元素拖拽，通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋

node-red本身就是为MQTT而诞生，因此很适合进行物联网数据展示，支持数据库操作、mqtt协议,同时用户也可以在它的基础上，使用html等进行前端界面修改。如果你想快速而完美的展示你的数据，不妨试一试NODE-RED。当然，你想安装它，也很简单的~~ nede-red这款…

原来拖拽 API 除了可以用来上传文件、页面布局或列表项排序之外，还可以跨越浏览器的边界，实现数据共享。

一个可视化搭建系统的演进过程可视化搭建系统是一个有趣又神秘的话题，但事实上上手并不困难，结合过去云凤蝶在中台应用搭建的探索，我们尝试用一个码农想方设法偷懒的故事来教大家从零开始写一个可视化搭建系统开始

最近在学习Vue，边做个小demo边学习。其中有一个小功能需要使用到拖放，顺便还学一下拖放。拖放是HTML5的标准，对着教程在普通的页面上很容易就实现了，但是vue中基本都是数据驱动

无论大公司还是小公司，我们开发前端工程时候，项目工程又很多类似的功能或者页面，开发经常是加班加点搬砖去做一些无成长反复操作的工作，看键盘上 Ctrl 键已经被磨掉了漆，C 和 V 也马上磨白了，那对于开发如何把这些重复的工作用机器去解决？在前端资源紧缺的情况下，是否可直接有工具…

开完产品需求会议，遇到了一个需求，首先页面分成两栏布局，左侧展示数据组件，支持拖拽排序，点击按钮清除组件。右侧支持将组件的缩略图拖拽至左侧生成一个新的组件。

最终效果实现功能：主页面结构：左侧可选组件列表、中间容器画布、右侧编辑组件定义好的属性从菜单拖拽组件到容器；单选、多选；容器内的组件可以拖拽移动位置；组件拖拽调整宽高；组件拖拽贴边，显示辅助线；操作栏

注册的组件对象放在componentList（用于渲染组件菜单）和componentMap(方便查找)里。 在 mousemove 中通过计算鼠标 按下时位置 与 当前位置 的差值，计算出最新的选中的组件坐标。