Heim > Artikel > Web-Frontend > js implementiert die Mausziehfunktion

js implementiert die Mausziehfunktion

巴扎黑Original: 2017-05-14 14:26:341565Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode von js zur Implementierung der Mausziehfunktion vorgestellt. Hat einen sehr guten Referenzwert. Schauen wir es uns mit dem Editor unten an

Rendering:

Der Code lautet wie folgt:

<!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>

Das obige ist der detaillierte Inhalt vonjs implementiert die Mausziehfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Codebeispiel zum Lesen von Dateien über die Filereader-Schnittstelle in JavaScriptNächster Artikel：Codebeispiel zum Lesen von Dateien über die Filereader-Schnittstelle in JavaScript

In Verbindung stehende Artikel

Mehr sehen