Javascript-Drag-and-Drop-Prototyp

In diesem Artikel wird hauptsächlich der Prototyp von Javascript Drag & Drop vorgestellt (der Code wird Zeile für Zeile analysiert, damit Sie das Prinzip von Drag & Drop leicht verstehen können). Drag & Drop: Tatsächlich ist es die Maus und der Abstand von der oberen linken Ecke bleibt gleich. Schauen wir uns das Bild unten an:

Dieser rote Punkt ist die Maus.

Drag-Drag bedeutet eigentlich, die Position eines Objekts anhand der Position der Maus zu berechnen. Es ist so einfach und so absichtlich. Wie finden Sie diesen Abstand? ?

Der Unterschied zwischen der Mausposition und der Objektposition ist der Abstand, oder? Dann besteht diese diagonale Linie aus horizontalen Linien und vertikalen Linien.

Schauen wir uns an, wie das Programm funktioniert.

Was er tatsächlich veränderte, war die linke Spitze eines bestimmten p, und dann begann er sich zu bewegen. Bei dieser Methode muss es eine absolute Positionierung geben, oder?

<p id="p1"></p>

Hier gibt es mehrere Schritte: 1. Maus runter 2. Maus hoch 3. Mausbewegung

<style type="text/css">
      #p1 {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
      }
    </style>

Sehen Sie sich das Bild an und sprechen Sie:

<script type="text/javascript">
   window.onload = function() {
    var op = document.getElementById("p1");
    var disX = 0;
    var disY = 0;
    op.onmousedown = function(ev) {
     var oEvent = ev || event; // 浏览器兼容
     disX = oEvent.clientX - op.offsetLeft; // 横向的位置就是鼠标的位置-p的位置
     disY = oEvent.clientY - op.offsetTop;
    };

    op.onmousemove = function(ev) {
      var oEvent = ev || event;
      op.style.left = oEvent.clientX - disX+&#39;px&#39;; // 当前鼠标的位置-disX
      op.style.top = oEvent.clientY - disY+&#39;px&#39;;
     };
   };
  </script>

Das Bild zeigt es sehr deutlich

var opLeft = oEvent.clientX - disX;

Mouseup Werfen wir jetzt keinen Blick auf die Wirkung. .

Sie werden ein sehr interessantes Phänomen finden: Die Maus wird mir folgen, auch wenn ich nicht darauf klicke. ? ?

Schauen wir uns die Mausbewegung an: Niemand schreibt in Javascript vor, dass die Maus vor dem Start gedrückt werden muss, oder? Unabhängig davon, ob Sie die Maus drücken oder nicht, passiert diese Mausbewegung immer wieder, also kommt das Problem von hier . Bevor die Maus gedrückt wird, sollte es keine Reaktion geben, wenn die Maus darüber bewegt wird. Sie reagiert nur, wenn die Maus gedrückt wird.

Diese Mausbewegung sollte also nicht sofort hinzugefügt werden, sondern warten, bis die Maus gedrückt wird, bevor wir Mausbewegung hinzufügen.

Fügen Sie übrigens Mouseup hinzu, dann wird seine Rolle widergespiegelt. Die Funktion lautet op.onmousemove = null; entferne das Bewegungsereignis,

Andernfalls folgt Ihnen das Objekt weiterhin, wenn Sie die Maus anheben. op.onmouseup = null; Ohne Müll zu hinterlassen, ist das Anheben der Maus nutzlos.

Sehen wir uns den geänderten Code an:

Jetzt haben wir einen einfachen Drag it out erstellt. Natürlich gibt es noch einige kleine Probleme, die gelöst werden müssen.

<script type="text/javascript">
   window.onload = function() {
    var op = document.getElementById("p1");
    var disX = 0;
    var disY = 0;
    op.onmousedown = function(ev) {
     var oEvent = ev || event; // 浏览器兼容
     disX = oEvent.clientX - op.offsetLeft; // 横向的位置就是鼠标的位置-p的位置
     disY = oEvent.clientY - op.offsetTop;

     op.onmousemove = function(ev) {
      var oEvent = ev || event;
      op.style.left = oEvent.clientX - disX+&#39;px&#39;; // 当前鼠标的位置-disX
      op.style.top = oEvent.clientY - disY+&#39;px&#39;;
     };
     op.onmouseup = function() {
      op.onmousemove = null;
      op.onmouseup = null; // 不留垃圾,鼠标抬起本来也就没有用了
     };

    };

   };
  </script>

Aber egal was passiert, wir haben bereits einen Prototyp von Drag & Drop.

Das Obige ist der gesamte Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter

JavaScript-Video-Tutorial

!