H5中的拖放
阿新 • • 發佈：2017-10-29
() 存在 con dragenter asc html all log 分享
在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中的拖放