Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 16:08:52
Original
1334 Leute haben es durchsucht

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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage