標籤：htm window 基礎上 round set move pos osi col
<!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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
