H5中的拖放
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5中的拖放相关的知识，希望对你有一定的参考价值。
在h5中会有一些的拖放的，就像下图
代码人如下所示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1,#div2{ width: 600px; height: 500px; border: 1px solid red; float: left; } </style> </head> <body> <p>请把图片拖放到矩形中</p> <!-- ondrop:当放置被拖动数据时，发生drop事件 ondragover:规定在何处放置被拖动的数据 ondragenter：表示元素被拖动到放置目标生就会触发，类似于mousrover事件 --> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="enter(event)" ondragleave="leave(event)"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <!-- draggable="true" 设置元素可以拖放 ondragstart:拖动时，调用一个函数 --> <img src="null5f39df4782a2f8f7.jpg" id="drag1" draggable="true" ondragstart="drag(event)" ondragend="end(event)"/> <script type="text/javascript"> function allowDrop(ev){ //重写dragover事件的默认行为，将无效放置目标设置为课放置目标 ev.preventDefault(); console.log("正在移动目标中"); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);//拖放的数据类型和值 console.log("拖动开始了"); } function drop(ev){ ev.preventDefault(); //保存在DataTransfer对象中的数据只能在drop事件处理程序中读取 var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); console.log("正在移动目标中"); } function enter(){ console.log("进入目标区了"); } function leave(){ console.log("离开目标区了"); } function end(){ console.log("拖放停止了"); } </script> </body> </html>
以上是关于H5中的拖放的主要内容，如果未能解决你的问题，请参考以下文章