圖片拖拽原生js
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>拖拽原生js</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: #ffff00;
position: absolute;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("box1");
//onmousedown:鼠標按下 選擇元素
//onmousemove:移動元素
//onmouseup:鼠標釋放 釋放元素
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
//鼠標在div中的左邊的的距離=鼠標的橫坐標-div的left值
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+‘px‘;
oDiv.style.top=oEvent.clientY-disY+‘px‘;
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
//在釋放之後，下次操作要全部清空再操作，而不是再move的基礎上重復操作
// document.onmousedown=null;
}
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
圖片拖拽原生js