Einige Probleme im Prototyp von Javascript Drag & Drop (Analyse des Codes Zeile für Zeile, sodass Sie die Prinzipien von Drag & Drop leicht verstehen können)_Javascript-Kenntnisse

Heute werden wir einige Probleme im letzten Drag-Prototyp lösen. Was sind die folgenden Probleme?

Im Anhang finden Sie den Javascript-Code aus der vorherigen Ausgabe, damit jeder das Problem überprüfen kann.

<script type="text/javascript">
   window.onload = function() {
    var oDiv = document.getElementById("div1");
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function(ev) {
     var oEvent = ev || event; 
     disX = oEvent.clientX - oDiv.offsetLeft; 
     disY = oEvent.clientY - oDiv.offsetTop;

     oDiv.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX+'px'; 
      oDiv.style.top = oEvent.clientY - disY+'px';
     };
     oDiv.onmouseup = function() {
      oDiv.onmousemove = null;
      oDiv.onmouseup = null;
     };

    };

   };
  </script>

1. Wenn ich die Maus während des aktuellen Ziehens schneller bewege, werden Sie feststellen, dass die Maus aus dem Div herauskommt und das Div der Maus zu diesem Zeitpunkt nicht folgt.

Warum tritt dann dieses Problem auf?

Der Grund ist eigentlich ganz einfach. Wir fügen dem Div das Mousemove-Ereignis hinzu. Sobald die Maus das Div verlässt, wird die Mousemove zu diesem Zeitpunkt nicht mehr ausgelöst.

Lösung: Da sich Ihre Maus immer noch auf der Seite befindet, wird die Mausbewegung auf jeden Fall ausgelöst. Auf diese Weise kann sie problemlos schnell verschoben werden.

Dann ändern wir den Code entsprechend.

<script type="text/javascript">
   window.onload = function() {
    var oDiv = document.getElementById("div1");
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function(ev) {
     var oEvent = ev || event; 
     disX = oEvent.clientX - oDiv.offsetLeft; 
     disY = oEvent.clientY - oDiv.offsetTop;
    // 事件加载document 上
     document.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX+'px';
      oDiv.style.top = oEvent.clientY - disY+'px';
     };
     oDiv.onmouseup = function() {
      document.onmousemove = null;
      oDiv.onmouseup = null; 
     };

    };

   };
  </script>

Dann kann dieses Problem gelöst werden.

2. Mal sehen, ob es jetzt irgendwelche Probleme gibt. Obwohl das Problem des schnellen Ziehens gelöst ist, wenn ich die Maus an diese Position bewege

Jetzt können Sie deutlich erkennen, dass sich die Maus nicht auf dem Div befindet. Wenn Sie die Maus zu diesem Zeitpunkt anheben, können Sie sehen, dass sie sich nach der Rückkehr immer noch bewegt. Das ist ein weiterer Fehler!

Eigentlich ist dieses Problem das gleiche wie oben. Die Lösung ist also sehr einfach. Fügen wir dem Dokument Mouseup hinzu. Probieren wir es aus

document.onmouseup = function() { 
      document.onmousemove = null; 
      document.onmouseup = null; 
     };

Auf diese Weise tritt der vorherige Fehler nicht auf, wenn Sie sich gerade in die Position bewegen, und es gibt kein Problem, wenn Sie sich schnell bewegen. Alles ist normal.

3. Schauen wir uns die Probleme mit der Browserkompatibilität an

Tatsächlich gibt es ein solches Problem in niedrigeren Versionen von Firefox
. Wie sieht es aus? Wenn Sie es zum ersten Mal ziehen, ist es richtig. Wenn Sie es einmal ziehen, gedrückt halten und verschieben, werden Sie feststellen, dass sich dahinter ein Schatten befindet. Was ist los?

Eigentlich ist das, was wir ziehen, ein leeres Div. Firefox hat einen Fehler. Was ist, wenn wir dem Div etwas Inhalt hinzufügen?

Sie werden feststellen, dass es jetzt wieder kein Problem gibt.

Der Firefox-Fehler tritt also nur in leeren Divs auf.

Lösung:

Es ist eigentlich ganz einfach, wir müssen nur verhindern, dass das Browser-Standardereignis in onmousedown „false“ zurückgibt. Warum es zu onmousedown hinzufügen?

Sie können darüber nachdenken, ab welchem ​​Ereignis das Ziehen beginnt, oder? Es beginnt mit dem Drücken der Maus. Es muss also in onmousedown geladen werden.

Tatsächlich habe ich gerade eine Rückgabe „false“ hinzugefügt, um den Firefox-Fehler zu blockieren.

Egal wie stark Sie es ziehen, es wird kein Problem geben.

Anbei ist der Code:

<script type="text/javascript">
   window.onload = function() {
    var oDiv = document.getElementById("div1");
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function(ev) {
     var oEvent = ev || event;
     disX = oEvent.clientX - oDiv.offsetLeft;
     disY = oEvent.clientY - oDiv.offsetTop;
     // 事件加载document 上
     document.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX+'px';
      oDiv.style.top = oEvent.clientY - disY+'px';
     };
     document.onmouseup = function() {
      document.onmousemove = null;
      document.onmouseup = null;
     };

     return false;

    };

   };
  </script>

Jetzt ist das Programm abgeschlossen, aber es gibt immer noch einige Probleme mit der Benutzererfahrung.

Zum Beispiel kann der Benutzer dieses Div aus dem Browser ziehen. Wie kann man es also lösen?

Dann fügen wir ein Urteil hinzu. Das geht ganz einfach, wenn man von links ausgeht

, dann ist es direkt gleich 0 und er wird nicht in der Lage sein, von links herauszukommen. Dann gilt das Gleiche auch für das oben Gesagte.

Wie kann man also verhindern, dass man nicht mehr von rechts abfahren kann? ? Zeichnen Sie einfach ein Bild und es wird klar. Tatsächlich können wir es berechnen, indem wir einfach die Breite des Div von der sichtbaren Breite der Seite subtrahieren.

Dann ist dies der sogenannte Maximalwert. Wenn die Bewegungsdistanz diesen Maximalwert überschreitet, entspricht sie diesem Maximalwert. Dann ist es unten dasselbe.

Im Anhang finden Sie den vollständigen Code:

<script type="text/javascript">
       // 拖拽空div 低版本的火狐有bug
      window.onload = function() {
        var oDiv = document.getElementById("div1");var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function(ev) {
          var oEvent = ev || event;
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;

          document.onmousemove = function(ev) {
            var oEvent = ev || event;
            // 存储div当前的位置
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;


            // 从左边拖出去了
            if (oDivLeft < 0) {
              oDivLeft = 0;
            } else if (oDivLeft > document.documentElement.clientWidth - oDiv.offsetWidth) {
              oDivLeft = document.documentElement.clientWidth - oDiv.offsetWidth;
            }

            if (oDivTop < 0) {
              oDivTop = 0;
            } else if (oDivTop > document.documentElement.clientHeight - oDiv.offsetHeight) {
              oDivTop = document.documentElement.clientHeight - oDiv.offsetHeight;
            }

            oDiv.style.left = oDivLeft + 'px';
            oDiv.style.top = oDivTop + 'px';
          };

          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
          return false; // 阻止默认事件,解决火狐的bug
        };
      };
    </script>

Dann ist das Drag & Drop nun relativ abgeschlossen. O(∩_∩)O