Home >Web Front-end >JS Tutorial >Example of simple mouse dragging effect using javascript_javascript skills

Example of simple mouse dragging effect using javascript_javascript skills

WBOYOriginal: 2016-05-16 16:05:031256browse

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;

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";

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>

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Sharing tips on && and || expressions in javascript_javascript tipsNext article：Sharing tips on && and || expressions in javascript_javascript tips

See more

Example of simple mouse dragging effect using javascript_javascript skills

Related articles