適合pc端的移動拖拽,分享一下。
阿新 • • 發佈:2019-10-09
h5新加的特性拖拽事件,但是隻適合PC端哦。不多說了上程式碼
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body{ position: relative; margin: 0; } body:before{ content: ' '; display: table; } #p3{ position: absolute; } #div1{ width: 100px; height: 100px; position: absolute; top:500px; left:500px; background: #000; } </style> </head> <body> <h1>拖動的源物件可能觸發的事件</h1> <!-- <p class="p1"></p> --> <img id="p3" src="qd.png"/> <div id="div1"></div> <script> //事件源p3開始拖動 var offsetX,offsetY; p3.ondragstart=function(e){ console.log('事件源p3開始拖動'); //記錄剛一拖動時,滑鼠在飛機上的偏移量 offsetX= e.offsetX; offsetY= e.offsetY; } //事件源p3拖動中 p3.ondrag=function(e){ console.log('事件源p3拖動中'); var x= e.pageX; var y= e.pageY; console.log(x+'-'+y); //drag事件最後一刻,無法讀取滑鼠的座標,pageX和pageY都變為0 if(x==0 && y==0){ return; //不處理拖動最後一刻X和Y都為0的情形 } x-=offsetX; y-=offsetY; p3.style.left=x+'px'; p3.style.top=y+'px'; } // 源物件p3拖動結束 p3.ondragend=function(){ console.log('源物件p3拖動結束'); } //源物件被拖動著進入目標物件 div1.ondragenter = function(){ console.log('drag enter111111111111111111'); } //源物件被拖動著懸停目標物件上方 div1.ondragover = function(e){ //dragover 事件預設行為:必須觸發drag leave e.preventDefault();// 阻止事件的預設行為,使得drop事件可能觸發 //有個預設行為是必須觸發dragleave console.log('drag over'); } //源物件被拖動著離開了目標物件 div1.ondragleave = function(){ console.log('drag leave'); } //源物件被拖動著目標物件上方被釋放被鬆手 div1.ondrop = function(){ console.log('drag drop'); } </script> </body> </html>
更多專業前端知識,請上 【猿204