H5组件拖拽与放置_butcher_h5组件拖拽

irpas 02-07 2033

1、效果

为了便于理解原理，这里举例在组件列表中拖拽一个按钮到容器中生成一个新按钮的案例，代码尽可能简洁，主要是说明清楚如何实现的拖拽，如下：

2、原理

使用H5自带的拖拽api实现组件拖拽生成，关键的点如下：

1、被拖拽的目标组件（以下简称目标）上需要添加一个属性draggable="true"

例如需要让一个按钮可以拖拽：

2、需要了解以下几个监听事件

用于目标组件上的：

ondragstart ：目标开始拖拽ondrag ：目标拖拽的过程中ondragend ：目标拖拽结束

用于容器上的：

ondragenter ：目标进入容器

ondragover ：目标在容器中移动

这里需要注意，当前的H5版本中，我们需要阻止它的默认事件，否则会导致ondrop 失效！！！

ondragover 的参数中默认会传一个event，我们只需要event.preventDefault();就可以了，详情看下面代码

ondragleave ：目标离开容器

ondrop ：目标在容器内释放

用于组件之间数据传递的

dataTransfer

注意这个是使用event调用的一个属性。其中有setData、getData方法，用法就和平时用map一样，只不过需要注意，这里的k-v键值对都是string类型！！

具体用法看代码。

3、代码例子

直接将以下代码拷贝到你的html文档中便可看到效果！

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .list{ width: 1000px; height: 300px; background: #aaaa7f; } .content{ margin-top: 10px; width: 1000px; height: 300px; background: #ffaaff; } </style> </head> <body>  <div class="list">  <button id="btn" type="button" draggable="true">按钮</button> </div>  <div id="content" class="content"> </div> <script type="text/javascript"> let btn = document.getElementById("btn"); let content = document.getElementById("content"); // ============= 以下是被拖拽目标的事件 ============= // 目标开始拖拽事件 btn.ondragstart = function(e) { console.log("目标开始拖拽",e); // e.dataTransfer是H5实现的一个可以在拖拽与被拖拽组件之间的“存储器”，实现组件间的数据传输 e.dataTransfer.setData("id",e.target.id) } // 目标开始拖拽中的事件 btn.ondrag = function(e){ // console.log("目标拖拽的过程中",e); } // 目标拖拽结束的事件 btn.ondragend = function(e){ console.log("目标拖拽结束",e) } // ============= 以下是拖拽到容器区域的事件 ============ content.ondragenter = function(e){ console.log("检测到目标进入容器",e); } content.ondragover = function(e){ // console.log("目标在容器上移动！",e); // 阻止默认事件，否则ondrop会失效 e.preventDefault(); } // 目标离开容器的事件 content.ondragleave = function (e) { console.log("拖目标离开容器",e); } // 目标在容器内被释放的事件 content.ondrop = function (e) { console.log("目标在容器区域释放",e.dataTransfer.getData("id")); // cloneNode(true)为深克隆节点，创建一个新的节点放到容器里面，这样才不会影响源节点 let node = document.getElementById(e.dataTransfer.getData("id")).cloneNode(true); // 做一些标识，表示这个这个确实生成的 node.setAttribute("id","newBtn"); node.innerText = "新按钮"; // 这是释放之后对应的容器的信息，我们总要拿到一个容器放目标组件 let targetContent = document.getElementById(e.target.id); targetContent.appendChild(node) } </script> </body> </html> 4、拓展思考 1、应用低代码平台

有人说

低代码开发是云计算之后的下一场IT革命。

事实上，低代码已经默默发展了20多年了，但是在2015才慢慢出现在人们的视野中，有人归纳低代码平台的几个重要时间节点如下：

2015年微软、谷歌等巨头入局。 2018年西门子收购Mendix，OutSystems获得融资，低代码在海外走红。 2015-2018年期间，国内低代码厂商像简道云、氚云等也斩露头角。 2018年起，互联网巨头阿里、腾讯、百度纷纷入局。 2019年起，低代码成为我国ICT产业中最明显的增量市场。 2021钉钉6.0发布会再次引燃低代码市场。

来自：CSDN博主「保卫大狮兄」的原创文章原文链接：https://blog.csdn.net/BeWorkingMan/article/details/113858883

低代码说白了就说不用接触代码，通过可视化拖拽的方式就能生成一个应用。

所以上面的例子其实也是以这个为背景编写的，但是就这些要打造一个低代码平台必然是不可能的，哈哈。

但是这可以作为向低代码迈出的第一步。

2、结合组件库

目前市面上组件库可以说是百花齐放了。element-ui、antd、navite-ui…

我们上面的例子完全可以改造成使用这些组件库生成UI界面，只不过，创建节点的方式咱们可能要稍作改动，数据也需要更详细一些。

3、通过自定义json模板实现

使用js的方式创建节点多少有些局限了，当组件越来越多，我们需要通过传入的动态数据，决定要渲染哪些组件。

这时候我们其实可以通过json数据绑定的形式实现，内容区编写一个模板渲染组件，传入不同的json然后给我们生成特定的页面。

也就是说可能需要三个区域：组件区、容器、属性区。

具体json数据怎么设计就看自己需求了。