Einfacher Drag-and-Drop-Effekt mit js_javascript-Kenntnissen

Während der Front-End-Entwicklung gibt es viele Orte, an denen der Drag-Effekt verwendet wird. Natürlich ist http://jqueryui.com/draggable/ eine gute Wahl, aber ich bin jemand, der das möchte Um die Frage zu stellen, habe ich einige Zeit gebraucht, um ein ähnliches Plug-In mit js zu implementieren, dazu gibt es nicht viel zu sagen.

zuerst: HTML und CSS

Code kopieren Der Code lautet wie folgt:

          * {
              Rand: 0;
              padding: 0;
}
           #div1 {
Position: absolut;
                Breite: 100 Pixel;
             Höhe: 100 Pixel;
              Cursor: bewegen;
             Hintergrundfarbe: rot;
}

Jetzt implementieren wir zunächst den Hauptalgorithmus:

Code kopieren Der Code lautet wie folgt:

<script><br>           window.onload = function () {<br> // Holen Sie sich das Div, das gezogen werden muss <br>             var div1 = document.getElementById("div1");<br> //Mausdruckereignis hinzufügen<br>             div1.onmousedown = function (evt) {<br>               var oEvent = evt || event;<br>                                 // Den Abstand von der Maustaste zum Div links oben ermitteln <br>             var distanceX = oEvent.clientX - div1.offsetLeft;<br>             var distanceY = oEvent.clientX - div1.offsetTop;<br> //Dokumentgleitzeit hinzufügen<br> document.onmousemove = Funktion (evt) {<br>                   var oEvent = evt || event;<br> //Berechnen Sie den linken oberen Wert des div<br> neu                   var left = oEvent.clientX - distanceX;<br>                   var top = oEvent.clientY - distanceY;<br> //left Wenn kleiner oder gleich Null, auf Null setzen, um zu verhindern, dass das Div aus dem Dokument gezogen wird <br> Wenn (links <= 0) {<br />                                left = 0;<br />                  }<br /> //Wenn die linke Seite die rechte Grenze des Dokuments überschreitet, setzen Sie sie auf die rechte Grenze<br />                               else if (left >= document.documentElement.clientWidth - div1.offsetWidth) {<br>                                 left = document.documentElement.clientWidth - div1.offsetWidth;<br>                  }<br> Wenn (oben <= 0) {<br />                            top = 0;<br />                  }<br />                             else if (top >= document.documentElement.clientHeight - div1.offsetHeight) {<br> Top = document.documentElement.clientHeight - div1.offsetHeight;<br>                  }<br> //Wert dem div neu zuweisen<br>                   div1.style.top = top "px";<br>                                                   div1.style.left = left "px";<br>                 }<br> //Maus-Lift-Ereignis hinzufügen<br>              div1.onmouseup = function () {<br>                                                                                                                                        document.onmousemove = null;<br>                 div1.onmouseup = null;<br>                 }<br>             }<br> }<br> </script>

Ja, verwenden Sie die objektorientierte Implementierung

Code kopieren Der Code lautet wie folgt:

          * {
               margin:0;
              padding:0;
}
           #div1 {
                Breite: 100 Pixel;
             Höhe: 100 Pixel;
             Hintergrundfarbe: rot;
}
           #div2 {
              Hintergrundfarbe:gelb;
               width:100px;
              height:100px;
}

js Draggle-Klasse:

Code kopieren Der Code lautet wie folgt:

 Funktion Drag(id) {
            this.div = document.getElementById(id);
            if (this.div) {
                this.div.style.cursor = "move";
                this.div.style.position = "absolute";
            }
            this.disX = 0;
            this.disY = 0;
            var _this = this;
            this.div.onmousedown = Funktion (evt) {
                _this.getDistance(evt);
                document.onmousemove = Funktion (evt) {
                    _this.setPosition(evt);
                }
                _this.div.onmouseup = function () {
                    _this.clearEvent();
                }
            }
        }
        Drag.prototype.getDistance = function (evt) {
            var oEvent = evt || Ereignis;
            this.disX = oEvent.clientX - this.div.offsetLeft;
            this.disY = oEvent.clientY - this.div.offsetTop;
        }
        Drag.prototype.setPosition = function (evt) {
            var oEvent = evt || Ereignis;
            var l = oEvent.clientX - this.disX;
            var t = oEvent.clientY - this.disY;
            if (l <= 0) {
                l = 0;
            }
            else if (l >= document.documentElement.clientWidth - this.div.offsetWidth) {
                l = document.documentElement.clientWidth - this.div.offsetWidth;
            }
            if (t <= 0) {
                t = 0;
            }
            else if (t >= document.documentElement.clientHeight - this.div.offsetHeight) {
                t = document.documentElement.clientHeight - this.div.offsetHeight;
            }
            this.div.style.left = l "px";
            this.div.style.top = t "px";
        }
        Drag.prototype.clearEvent = function () {
            this.div.onmouseup = null;
            document.onmousemove = null;
        }

endlich: Endgültige Umsetzung:

Code kopieren Der Code lautet wie folgt:

window.onload = function () {
             new Drag("div1");
             new Drag("div2");
}

Der Effekt ist wie folgt:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird jedem helfen, Javascript besser zu beherrschen.