Exemple d'effet simple de glissement de souris utilisant les compétences javascript

Exemple d'effet simple de glissement de souris utilisant les compétences javascript_javascript

WBOY

Libérer： 2016-05-16 16:05:03

original

1237 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter un simple effet de glissement de souris à l'aide de JavaScript. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Il est très courant de faire glisser un élément avec la souris et de le placer n'importe où sur la page Web. Par exemple, de nombreuses sections de modèles de blog peuvent être déplacées d'elles-mêmes vers la position correspondante.

Écrivons-en un simple qui peut obtenir l'effet du glissement de la souris.

Lorsque la souris est enfoncée, enregistrez la différence entre la position actuelle de la souris et la distance gauche de l'élément.
Lorsque la souris bouge, une valeur est attribuée à la position de l'élément, qui est la position de la souris, moins la différence à l'instant.
Lorsque la souris est relâchée, attribuez null au mouvement et au relâchement de la souris, afin qu'ils n'effectuent aucune autre action.

Point 1 :

disx = oevent.clientX - box.offsetLeft;

Copier après la connexion

Pour déterminer la position du point de la souris sur l'élément lors du glisser, c'est la position de la souris moins la distance gauche de l'élément.

Point 2 :

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

Copier après la connexion

La position de l'élément lors du glissement, la position actuelle de la souris moins la valeur qui vient d'être calculée précédemment.

D'accord, voici le 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>

Copier après la connexion

Je voudrais l'améliorer à nouveau. Il n'y a pas de limite à la plage de déplacement de la souris ci-dessus, et parfois la fenêtre de déplacement n'est pas visible à l'extérieur. Limitons la portée

Point 1 : Comme suit, si la position gauche de l'élément est inférieure à 0, attribuez-lui la valeur 0. Si elle est supérieure à la taille de la fenêtre visuelle moins la largeur de l'élément lui-même, attribuez-lui la différence entre la taille de la fenêtre visuelle moins la largeur de l'élément lui-même.

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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.