Einige einfache Javascript-Drag-and-Drop-Anwendungen (Analysieren Sie den Code Zeile für Zeile, damit Sie die Prinzipien von Drag-and-Drop leicht verstehen können)_Javascript-Kenntnisse

Heute werfen wir einen Blick darauf, wie verhindert werden kann, dass das gezogene Objekt aus einem bestimmten Div gezogen wird, und auf die Drag-Adsorption-Funktion

Wie beim letzten Mal erwähnt, kann unser Ziehen nicht aus dem visuellen Bereich gezogen werden. Auf dieser Basis fügen wir ein übergeordnetes Div hinzu, um zu verhindern, dass es aus dem übergeordneten Bereich gezogen wird. Das Prinzip ist das gleiche wie zuvor, einfach.

HTML-Code:

<div id="div2">
      <div id="div1">

      </div>
    </div>

CSS-Code:

<style type="text/css">
      #div1 {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
      }
      #div2 {
        width: 400px;
        height: 300px;
        background: #CCCCCC;
        position: relative;
      }
    </style>

Javascript-Code:

<script type="text/javascript">
       // 拖拽空div 低版本的火狐有bug
      window.onload = function() {
        var oDiv = document.getElementById("div1");
        var oDiv2 = document.getElementById("div2");
        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 > oDiv2.offsetWidth - oDiv.offsetWidth) {
              oDivLeft = oDiv2.offsetWidth - oDiv.offsetWidth;
            }

            if (oDivTop < 0) {
              oDivTop = 0;
            } else if (oDivTop > oDiv2.offsetHeight - oDiv.offsetHeight) {
              oDivTop = oDiv2.offsetHeight - 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>

Die Darstellung ist wie folgt:

Halten Sie es einfach.

Der nächste Schritt besteht darin, es automatisch absorbieren zu lassen.

Tatsächlich wird dies jeder oft verwenden. Wenn es beispielsweise ein kleines Fenster in PS gibt und es an den Rand der Seite gezogen wird, wird es automatisch daran adsorbiert.

Wie kann unser Drag & Drop eine solche Funktion haben?

Das wurde bereits erwähnt, wenn es um Bewegung geht. Genau wie beim Taxifahren kann man den Fahrer nicht bitten, genau dort anzuhalten, wo man ihn haben möchte. Er muss irgendwo in der Nähe des Ziels anhalten.

Die Vorgehensweise ist die gleiche, weisen Sie den Wert einfach direkt zu, wenn er fast erreicht ist. Angenommen, wenn das Objekt, das ich ziehe, 50 Pixel von links entfernt ist, denke ich, dass es die linke Seite erreicht hat, und weisen Sie ihm dann den Wert 0 zu, damit es automatisch daran festhält.

Das Prinzip ist sehr einfach. Schauen wir uns an, wie der Code es umsetzt. Nehmen Sie einfach einige Änderungen vor

<script type="text/javascript">
      window.onload = function() {
        var oDiv = document.getElementById("div1");
        var oDiv2 = document.getElementById("div2");
        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;
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;


            // 当left 小于50 就自动归0 这样实现吸附
            if (oDivLeft < 50) {
              oDivLeft = 0;
            } else if (oDivLeft > oDiv2.offsetWidth - oDiv.offsetWidth) {
              oDivLeft = oDiv2.offsetWidth - oDiv.offsetWidth;
            }

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

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

          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
          return false; 
        };
      };
    </script>

Das nächste Mal werden wir über fortgeschrittene Anwendungen sprechen, die verantwortungsvoller und nützlicher sein werden. Unsere Drag-and-Drop-Funktionalität wurde verbessert.

Zum Beispiel Bilder ziehen und Text auswählen. Beispielsweise verfügt unsere aktuelle Drag-and-Drop-Seite nur über ein Div, das wir in der normalen Entwicklung nie antreffen werden.

Welche Probleme treten bei diesem Drag-and-Drop auf, wenn sich etwas auf der Seite befindet? ? ?

Es wird das nächste Mal gelöst ~ Bitte freuen Sie sich darauf