h5-拖拽接口
Posted fengbrother
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5-拖拽接口相关的知识,希望对你有一定的参考价值。
1.原效果网页
拖拽后:
2.主要实现代码
1 <div class="div1" id="div1"> 2 <!--在h5中,如果想拖拽元素,久必须为元素添加draggable="true".图片和超链接默认就可以拖拽--> 3 <p id="pe" draggable="true">试着把我拖拽过去1</p> 4 <p id="pe1" draggable="true">试着把我拖拽过去2</p> 5 </div> 6 <div class="div2" id="div2"></div> 7 <div class="div3" id="div3"></div> 8 <script> 9 /*学习拖拽,主要急救室学习拖拽事件*/ 10 //var ogj=null;//当前被拖拽的元素 11 /*var p = document.querySelector("#pe"); 12 var div2 = document.querySelector("#div2"); 13 var div1 = document.querySelector("#div1");*/ 14 /*应用于被拖拽元素的事件*/ 15 /* 16 * ondrag 应用于拖拽元素,整个拖拽过程都会调用--持续 17 * ondragstart 应用于拖拽元素,当拖拽开始是调用 18 * ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用 19 * ondragend 应用于拖拽元素,当拖拽结束时调用 20 * */ 21 document.ondragstart=function (e) 22 /*通过事件捕获来获取前被拖拽的子元素*/ 23 e.target.style.opacity=0.5;//拖拽元素半透明 24 e.target.parentNode.style.borderWidth="5px"; 25 ogj=e.target; 26 //console.log("ondragstart"); 27 /*通过dataTransfer来实现数据的存储于获取*/ 28 /* 29 * setData(format,data); 30 * format:数据的类型:text/html text/uri-list 31 * Data:数据:一般来说是字符串值 32 * */ 33 e.dataTransfer.setData("text/html",e.target.id); 34 35 document.ondragend=function (e) 36 e.target.style.opacity=1;//拖拽元素还原透明度100% 37 e.target.parentNode.style.borderWidth="1px"; 38 console.log("ondragend"); 39 40 document.ondragleave=function (e) 41 42 43 document.ondrag=function (e) 44 45 46 /* 47 * 应用于目标元素的事件 48 * ondragenter 应用于目标元素,当拖拽元素进入时调用 49 * ondragover 应用于目标元素,当停留在目标元素上时调用 50 * ondrop 应用于目标元素,当在目标元素上松开鼠标时调用 51 * ondragleave 应用于目标元素,当鼠标离开目标元素时调用 52 * */ 53 document.ondragenter=function (e) 54 console.log("-----"+e.target); 55 56 document.ondragover=function (e) 57 console.log("ondragover"); 58 /*如果想触发ondrop事件,那么久必须在这个位置阻止浏览器的默认行为*/ 59 e.preventDefault(); 60 61 /*浏览器默认会阻止ondrop事件:我们必须在ondragover中阻止浏览器的默认行为*/ 62 document.ondrop=function (e) 63 console.log("ondrop"); 64 /*添加被拖拽的元素到当前目标元素*/ 65 //e.appendChild(p); 66 /*通过e.dataTransfer.setSata存储的数据,只能在drop事件中获取*/ 67 var id = e.dataTransfer.getData("text/html"); 68 console.log(id); 69 e.target.appendChild(document.getElementById(id)); 70 71 document.ondragleave=function (e) 72 console.log("目标元素:ondragleave"); 73 74 </script>
以上是关于h5-拖拽接口的主要内容,如果未能解决你的问题,请参考以下文章