Example of simple mouse dragging effect using javascript

Example of simple mouse dragging effect using javascript_javascript skills

WBOY

Release： 2016-05-16 16:05:03

Original

1262 people have browsed it

The example in this article describes how to implement a simple mouse drag effect using JavaScript. Share it with everyone for your reference. The specific analysis is as follows:

It is very common to drag an element with the mouse and place it anywhere on the web page. For example, many blog template sections can be dragged to the corresponding position by themselves.

Let’s write a simple one that can achieve the effect of mouse dragging.

When the mouse is pressed, record the difference between the current position of the mouse and the left distance of the element.
When the mouse moves, a value is assigned to the position of the element, which is the position of the mouse, minus the difference just now.
When the mouse is released, assign null to the mouse movement and mouse release, so that they will not take any further action.

Point 1:

disx = oevent.clientX - box.offsetLeft;

Copy after login

To determine the position of the mouse point on the element when dragging, it is the mouse position minus the left distance of the element.

Point 2:

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

Copy after login

The position of the element when dragging, the current position of the mouse minus the value just calculated previously.

Okay, here’s the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</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>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>

Copy after login

I would like to improve it again. There is no limit to the mouse dragging range above, and sometimes the dragging window cannot be seen outside. Let’s limit the scope

Point 1: As follows, if the left position of the element is less than 0, assign it a value of 0. If it is greater than the size of the visual window minus the width of the element itself, assign it the difference between the size of the visual window minus 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>无标题文档</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>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.