Heim > Artikel > Web-Frontend > Beispiel für einen einfachen Mauszieheffekt mit Javascript_Javascript-Kenntnissen

Beispiel für einen einfachen Mauszieheffekt mit Javascript_Javascript-Kenntnissen

WBOYOriginal: 2016-05-16 16:05:031199Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie Sie einen einfachen Mauszieheffekt mithilfe von JavaScript implementieren. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Es ist sehr üblich, ein Element mit der Maus zu ziehen und an einer beliebigen Stelle auf der Webseite zu platzieren. Beispielsweise können viele Blog-Vorlagenabschnitte selbst an die entsprechende Position gezogen werden.

Lassen Sie uns ein einfaches schreiben, das den Effekt des Ziehens mit der Maus erzielen kann.

Wenn die Maus gedrückt wird, notieren Sie die Differenz zwischen der aktuellen Position der Maus und dem linken Abstand des Elements.
Wenn sich die Maus bewegt, wird der Position des Elements ein Wert zugewiesen, der der Position der Maus abzüglich der aktuellen Differenz entspricht.
Wenn die Maus losgelassen wird, weisen Sie der Mausbewegung und der Mausfreigabe Null zu, damit keine weiteren Aktionen ausgeführt werden.

Punkt 1:

disx = oevent.clientX - box.offsetLeft;

Um die Position des Mauspunkts auf dem Element beim Ziehen zu bestimmen, ist es die Mausposition minus dem linken Abstand des Elements.

Punkt 2:

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

Die Position des Elements beim Ziehen, die aktuelle Position der Maus minus dem gerade zuvor berechneten Wert.

Okay, hier ist der 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>

Ich würde es gerne noch einmal verbessern. Der Mausziehbereich oben ist unbegrenzt und manchmal ist das Ziehfenster außerhalb nicht sichtbar. Beschränken wir den Umfang

Punkt 1: Wie folgt: Wenn die linke Position des Elements kleiner als 0 ist, weisen Sie ihm den Wert 0 zu. Wenn er größer als die Größe des visuellen Fensters abzüglich der Breite des Elements selbst ist, weisen Sie ihm den Wert zu Differenz zwischen der Größe des visuellen Fensters minus der Breite des Elements selbst.

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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

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：Teilen von Tipps zu && und ||Nächster Artikel：Teilen von Tipps zu && und ||

In Verbindung stehende Artikel

Mehr sehen