適合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