Of Stack

javascript implements a simple mouse drag effect instance

  • 2020-05-26 07:52:23
  • OfStack

This article illustrates the simple drag effect of javascript. Share with you for your reference. The specific analysis is as follows:

It is very common to drag an element with the mouse and put it in any position on the web page. For example, many blog templates can be dragged to the corresponding position by themselves.

Below write 1 simple can achieve the mouse drag effect.

When the mouse is pressed, the difference between the current position of the mouse and the distance to the left of the element is recorded.
When the mouse moves, assign a value to the position of the element, which is the position of the mouse, minus the difference.
When the mouse is released, assign null to the mouse movement and mouse release so that they do not move again.

Point 1: 


disx = oevent.clientX - box.offsetLeft;

To make sure that the mouse point is where the element is when you drag, you subtract the distance to the left of the element from the mouse position.

Point 2: 


box.style.left = oevent.clientX - disx + "px";

Drag the position of the element and the current position of the mouse minus the previously calculated value.

Okay, go to the code: 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Headless document </title>
<style>
body{margin:0; padding:0; height:1500px;}
#box{width:100px; height:100px; background:#06c; position:absolute;}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  box.style.left = oevent.clientX - disx + "px";
  box.style.top = oevent.clientY - disy + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1> Drag the mouse </h1>
<div id="box"></div>
</body>
</html>

To improve 1, the mouse drag above no limit range, sometimes drag outside the window can not be seen. So let's limit the scope

Point 1: as follows, if the left side of an element is less than 0, assign it a value of 0; if it is greater than the viewable size minus the width of the element itself, assign it a value of the difference between the viewable size and the width of the element itself. 


var boxl = oevent.clientX - disx;
if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Headless document </title>
<style>
body{margin:0; padding:0;}
#box{width:100px;
height:100px;
background:#06c;
position:absolute;
}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  var boxl = oevent.clientX - disx;
  var boxt = oevent.clientY - disy
  var vieww = document.documentElement.clientWidth || document.body.clientWidth;
  var viewh = document.documentElement.clientHeight || document.body.clientHeight;
  if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
  if(boxt < 0){
  boxt =0;
  }else if(boxt > viewh - box.offsetHeight){
  boxt = viewh- box.offsetHeight;
  }
  box.style.left = boxl + "px";
  box.style.top = boxt + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1> Drag the mouse </h1>
<div id="box"></div>
</body>
</html>

I hope this article is helpful for you to design javascript program.

Related articles: