js實現拖拽效果
阿新 • • 發佈：2020-09-20
程式碼如下
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: pink;
position: relative;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div>me</div>
<script>
var div=document.querySelector("div");
var
div.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){ //事件的執行函式自帶引數e
if(e.type==="mousedown"){ //e.type是執行事件的型別
offsetX=e.offsetX;
offsetY=e.offsetY;
document.addEventListener("mousemove",mouseHandler)
document.addEventListener("mouseup",mouseHandler) //如果有滑鼠移動或鬆開事件的發生再次執行mouseHandler函式
}else if(e.type==="mousemove"){
div.style.left=e.clientX-offsetX+"px"; //滑鼠相對當前可視視窗的座標 - 相對元素左上角的座標
div.style.top=e.clientY-offsetY+"px";
}else if(e.type==="mouseup"){
document.removeEventListener("mousemove",mouseHandler);
document.removeEventListener("mouseup",mouseHandler); //刪除滑鼠移動和滑鼠鬆開事件
}
}
</script>
</body>
</html 注意：div元素要設定定位才可以進行移動。
廣州vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com