Home >Web Front-end >JS Tutorial >How to implement left mouse button dragging effect with JavaScript
Two ways to achieve the drag effect of the left mouse button:
Method 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.move {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div>
</div>
<script>
//制作一个鼠标左键拖拽效果
var div = document.getElementsByClassName("move")[0];
var style = window.getComputedStyle(div);
var divLeft = parseFloat(style.left);
var divTop = parseFloat(style.top);
div.onmousedown = function(e){
if(e.button !== 0){
return ;//不是鼠标左键，return
}
window.onmousemove = function(e){
divLeft += e.movementX;//距上次鼠标位置的X长度
divTop += e.movementY;//距上次鼠标位置的Y长度
div.style.left = divLeft + "px";
div.style.top = divTop + "px";
}
window.onmouseup = window.onmouseleave = function(){
if(e.button === 0){//鼠标左键
window.onmousemove = null;
}
}
}
</script>
</body>
</html>
Recommended related video tutorials: "javascript Advanced Tutorial"
Method 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.move {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div>
</div>
<script>
//制作一个鼠标左键拖拽效果
var div = document.getElementsByClassName("move")[0];
var style = window.getComputedStyle(div);
div.onmousedown = function(e){
if(e.button !== 0){
return ;//不是鼠标左键，return
}
var divLeft = parseFloat(style.left);
var divTop = parseFloat(style.top);
var divPageX = e.pageX;
var divPageY = e.pageY;
window.onmousemove = function(e){
var disX = e.pageX - divPageX;
var disY = e.pageY - divPageY;
div.style.left = divLeft + disX + "px";
div.style.top = divTop + disY + "px";
}
window.onmouseup = window.onmouseleave = function(){
if(e.button === 0){//鼠标左键
window.onmousemove = null;
}
}
}
</script>
</body>
</html>Related recommended downloads: "Text Special Effects"
The above is the detailed content of How to implement left mouse button dragging effect with JavaScript. For more information, please follow other related articles on the PHP Chinese website!