Html5原生拖拽相干变乱简介以及基本实现
|
首要用到的是H5自带的拖拽结果。着实项今朝端部门是行使React编写的，也是在行使H5实现了之后才相识到Dan Abramov大佬有个React-DnD组件对原生拖拽要领举办了封装。轻微进修了一下，很强。后续有行使到再写篇文章举办分享。 相干变乱界说与用法 涉及一个属性六个变乱。变乱均为H5原闹变乱。 属性 draggable：正常div是不应承举办拖动的。必要添加属性draggable="true"将元素配置为可拖动。 变乱 ondragstart：拖拽元素变乱。在被拖拽时被挪用。 ondrag：拖拽元素变乱。在元素正在被拖拽时挪用。 ondragend：拖拽元素变乱。在拖拽元素安排时挪用。 ondragenter：安排元素变乱。在拖拽元素进入到安排元素有用地区时挪用。 ondragover：安排元素变乱。在拖拽元素包围安排元素有用地区时挪用 ondragleave：安排元素变乱。在拖拽元素分开安排元素有用地区时挪用。 ondrop：安排元素变乱。在拖拽元素被安排在安排元素中挪用。 基本代码实现 拖拽元素相干变乱实当代码如下。 function handleOndragstart() { /* 该变乱为拖拽元素被拖拽时挪用。一样平常用于获取该拖拽元素的独一标识，如id等。以利便后续数据更新时举办元素定位 */ } function handleOndragend() { /* 该变乱在拖拽元素被安排时挪用。一样平常用于重置变量操纵 */ } function handleOndrag() { /* 该变乱凭小我私人需求举办成果实现 */ } 拖拽元素H5代码如下 <div draggable="true" ondragstart="handleOndragstart()" ondrag="handleOndarg()" ondragend="handleOndragend()" > 该元素为拖拽元素 </div> 安排元素相干变乱实当代码如下 /* 默认环境下，数据/元素不能安排到其他元素中。 假如要实现该成果，我们必要防备元素的默认处理赏罚要领。我们可以通过挪用 event.preventDefault() 要领来实现 ondragover 变乱。 */ function handleOndragover(event) { event.preventDefault(); /* 在这里举办你的函数处理赏罚 */ } function handleOndragenter(event) { event.preventDefault(); /* 在这里举办你的函数处理赏罚 */ } function handleOndragleave(event) { event.preventDefault(); /* 在这里举办你的函数处理赏罚 */ } function handleOndrop(event) { event.preventDefault(); // 破除默认变乱。drop 变乱的默认举动是以链接情势打开 /* 一样平常在该变乱中，也就是拖拽元素被放下的时辰与后端举办交互举办数据更新 */ } 安排元素H5代码如下 <div ondragenter="handleOndragenter(event)" ondragover="handleOndragover(event)" ondragleave="handleOndragleave(event)" ondrop=“handleOndrop(event) > 该元素为安排元素 </div> 实例 以下代码可实此刻两个div之间举办子元素的拖拽 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>拖拽实现</title> <style type="text/css"> .parent { display: flex; width: 450px; justify-content: space-around; } .container { height: 300px; width: 200px; background-color: rgba(255, 255, 0, 0.3); display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { width: 100px; height: 50px; background-color: rgba(255, 255, 255, 1); } </style> <script type="text/javascript"> function handleOndragstart(event) { // 配置被拖动的数据，可简朴领略为配置Box的值为被拖动元素的id。此处为"Box" event.dataTransfer.setData("Box", event.target.id); } function handleOndragover(event) { event.preventDefault(); } function handleOndrop(event) { // 拖拽元素被放下时挪用 event.preventDefault(); var data = event.dataTransfer.getData("Box"); // 将拖拽元素追加到改安排元素中 event.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div class="parent"> <div class="container" ondragover="handleOndragover(event)" ondrop="handleOndrop(event)" > <div class="box" draggable="true" id="Box" ondragstart="handleOndragstart(event)" ></div> </div> <div class="container" ondragover="handleOndragover(event)" ondrop="handleOndrop(event)" ></div> </div> </body> </html> 最后 暂且写这么多吧。以上的实例也是用H5写的，并没有行使React实现。往后再试着写个React版的简朴demo吧。这应该也算是我的第一篇分享文章，但愿能僵持下去。 参考链接： 到此这篇关于Html5原生拖拽相干变乱简介以及基本实现的文章就先容到这了,更多相干Html5原生拖拽内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
