Effet glisser-déposer simple utilisant les compétences js_javascript

Lors du développement front-end, il existe de nombreux endroits où l'effet glisser est utilisé. Bien sûr, http://jqueryui.com/draggable/ est un bon choix, mais je suis une personne qui veut. pour poser la question, j'ai pris du temps pour implémenter un plug-in similaire en utilisant js, pas grand chose à dire.

premier : html et css

Copier le code Le code est le suivant :

Maintenant, implémentons d’abord l’algorithme principal :

Copier le code Le code est le suivant :

<script><br>           window.onload = function () {<br> //Récupère le div qui doit être glissé <br>             var div1 = document.getElementById("div1");<br> //Ajouter un événement de pression de souris<br>             div1.onmousedown = fonction (evt) {<br>               var oEvent = evt || événement ;<br>                                 // Obtenez la distance entre le bouton de la souris et le div en haut à gauche <br>             var distanceX = oEvent.clientX - div1.offsetLeft;<br>             var distanceY = oEvent.clientX - div1.offsetTop;<br> //Ajouter un temps de glissement du document<br> document.onmousemove = fonction (evt) {<br>                   var oEvent = evt événement ;<br> //Recalcule la valeur supérieure gauche du div<br>                   var left = oEvent.clientX - distanceX;<br>                   var top = oEvent.clientY - distanceY;<br> //left Lorsqu'il est inférieur ou égal à zéro, défini sur zéro pour empêcher le div d'être retiré du document <br> Si (gauche <= 0) {<br />                                gauche = 0 ;<br />                  }<br /> //Lorsque la gauche dépasse la limite droite du document, définissez-la sur la limite droite<br />                               else if (left >= document.documentElement.clientWidth - div1.offsetWidth) {<br>                                 left = document.documentElement.clientWidth - div1.offsetWidth;<br>                  }<br> Si (haut <= 0) {<br />                            top = 0;<br />                  }<br />                             else if (top >= document.documentElement.clientHeight - div1.offsetHeight) {<br> Top = document.documentElement.clientHeight - div1.offsetHeight;<br>                  }<br> //Réaffecter la valeur au div<br>                   div1.style.top = top "px";<br>                                                    div1.style.left = left "px";<br>                 }<br> //Ajouter un événement de levage de souris<br>              div1.onmouseup = function () {<br>                                                                                                                                                document.onmousemove = null;<br>                 div1.onmouseup = null;<br>                 }<br>             }<br> ><br> </script>

ouais, utilisez l'implémentation orientée objet

Copier le code Le code est le suivant :

Classe js Draggle :

Copier le code Le code est le suivant :

 fonction Glisser(id) {
            this.div = document.getElementById(id);
            si (this.div) {
                this.div.style.cursor = "déplacer";
                this.div.style.position = "absolu";
            >
            this.disX = 0;
            this.disY = 0;
            var _this = ceci;
            this.div.onmousedown = fonction (evt) {
                _this.getDistance(evt);
                document.onmousemove = fonction (evt) {
                    _this.setPosition(evt);
                >
                _this.div.onmouseup = fonction () {
                    _this.clearEvent();
                >
            >
        >
        Drag.prototype.getDistance = fonction (evt) {
            var oEvent = evt || événement ;
            this.disX = oEvent.clientX - this.div.offsetLeft;
            this.disY = oEvent.clientY - this.div.offsetTop;
        >
        Drag.prototype.setPosition = fonction (evt) {
            var oEvent = evt || événement ;
            var l = oEvent.clientX - this.disX;
            var t = oEvent.clientY - this.disY;
            si (l <= 0) {
                l = 0;
            >
            sinon if (l >= document.documentElement.clientWidth - this.div.offsetWidth) {
                l = document.documentElement.clientWidth - this.div.offsetWidth;
            >
            si (t <= 0) {
                t = 0;
            >
            sinon 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;
        >

enfin : Mise en œuvre finale :

Copier le code Le code est le suivant :

window.onload = fonction () {
             new Drag("div1");
             new Drag("div2");
>

L'effet est le suivant :

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cela aidera tout le monde à maîtriser le javascript avec plus de compétence.