Maison > Article > interface Web > js implémente la fonction glisser de la souris

js implémente la fonction glisser de la souris

巴扎黑original: 2017-05-14 14:26:341569parcourir

Cet article présente principalement l'exemple de code de js pour implémenter la fonction de glissement de la souris. A une très bonne valeur de référence. Jetons un coup d'oeil avec l'éditeur ci-dessous

Rendu :

Le code est le suivant :

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #p{
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  }
  #p2{
  width: 200px;
  height: 200px;
  background: gold;
  position: absolute;
  top: 200px;
  left: 200px;
  }
 </style>
 </head>
 <body>
 <p id="p">
 </p>
 <p id="p2"></p>
 <script>
  window.onload=function(){
  var p=document.getElementById("p");
  p.onmousedown=function(ev){
   var e=window.event || ev;
   //var Myp=document.getElementById("p");
   //获取到鼠标点击的位置距离p左侧和顶部边框的距离；
   var oX=e.clientX-p.offsetLeft;
   var oY=e.clientY-p.offsetTop;
   //当鼠标移动，把鼠标的偏移量付给p
   document.onmousemove=function(ev){
   //计算出鼠标在XY方向上移动的偏移量，把这个偏移量加给p的左边距和上边距，p就会跟着移动
   var e=window.event|| ev;
   p.style.left=e.clientX-oX+"px";
   p.style.top=e.clientY-oY+"px";
   }
   //当鼠标按键抬起，清除移动事件
   document.onmouseup=function(){
   document.onmousemove=null;
   document.onmouseup=null;
   }
  }
  var p2=document.getElementById("p2");
  p2.onmousedown=function(ev){
   var e=window.event || ev;
   //var Myp=document.getElementById("p");
   //获取到鼠标点击的位置距离p左侧和顶部边框的距离；
   var oX=e.clientX-p2.offsetLeft;
   var oY=e.clientY-p2.offsetTop;
   //当鼠标移动，把鼠标的偏移量付给p
   document.onmousemove=function(ev){
   //计算出鼠标在XY方向上移动的偏移量，把这个偏移量加给p的左边距和上边距，p就会跟着移动
   var e=window.event|| ev;
   p2.style.left=e.clientX-oX+"px";
   p2.style.top=e.clientY-oY+"px";
   }
   //当鼠标按键抬起，清除移动事件
   document.onmouseup=function(){
   document.onmousemove=null;
   document.onmouseup=null;
   }
  }
  }
 </script>
 </body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de code sur la façon de lire des fichiers via l'interface filereader en JavaScriptArticle suivant：Exemple de code sur la façon de lire des fichiers via l'interface filereader en JavaScript

Articles Liés

Voir plus