Drag & drop simple, simple, simple

Télécharger le projet
Commenter

Description

La description est simple : comment déplacer un div sur une page avec le code le plus court possible.

MISE À JOUR : Voici donc une mise à jour après près de 3 ans de silence. Les règles ont désormais changé : je dois écrire le Drag & Drop le plus performant en moins de 1 KO, minifié et non gzippé (sinon, ce serait trop facile).

La version actuelle (V 1.6) est de 702 OCTETS (env. 0.7 KO ou 427 OCTETS Gzippé) et apporte les changements suivants :
- AJOUT : La fonction MOVE retourne désormais un objet qui possède la fonction kill() permettant d'empêcher le 'drag'
- CHANGEMENT : N'écrase plus les événements, mais s'ajoute à ceux-ci. Cela résulte en une fonction plus compatible avec les autres scripts
- CHANGEMENT : Permet la copie des événements de l'élément

Pour plus d'information, consulter changelog.txt dans le ZIP.

En bref, MOVE.js offre les fonctionnalités suivantes :

- Supporte plusieurs éléments
- Supporte les appareils mobiles
- Supporte position:relative et position:fixed
- Tout se fait automatiquement
- Trouve automatiquement les valeurs "top" et "left"
- Permet d'empêcher le drag par la suite

L'installation est entièrement modifié, et simplifié. Plus besoin d'insérer les événements dans la balise. Une seule ligne javascript fait l'affaire :

Object O MOVE(elem);

ou


Object O new MOVE(elem); // Syntaxe pour les version 1.5 et -

elem est un élément javascript, par exemple retourné par les méthodes getElementById, getElementsByTagName, querySelector, etc... Voir l'exemple si vous avez des interrogations.

La seule obligation quant à l'élément "elem" est qu'il doit avoir sa position définie (position:absolute, position:relative ou position:fixed). Le script peut trouver ses propriétés left et top (et, de la même façon, bottom et right), mais il ne définira pas votre "position". Voir exemple pour plus de détails.

L'objet O retourné par la fonction MOVE ne possède qu'une fonction :

- kill : permet d'empêcher le drag 'n drop

Exemple :

var a = MOVE(document.getElementById('s'));
/*...*/
a.kill();
----------------

J'offre aussi une version amélioré, soit V. 1.6 PLUS, qui fait 630 OCTETS. Elle permet de passer des boucles d'effets.

Regardez la démo dans le ZIP pour plus de détail. Pour plus d'information sur Move+, consulter le fichier changelogPLUS.txt dans le ZIP qui offre plus d'informations ainsi que les changements apportés, assez semblables à ceux de MOVE.js

Source / Exemple : 


<html>
	<head>
		<title>Drag & drop</title>
		<script type='text/JavaScript'>
/*--------------------------
(c) JDMCreator, 2012, V. 1.6
--------------------------*/
(function(t) {
    var docu = document,
        body = docu.body,
        ke, de = docu.documentElement,
        g = "scrollLeft",
        ve = "scrollTop",
        R = "onmouse";

    function H(a, b, c, v) {
        v = a[b];
        a[b] = function(e) {
            if (v) {
                v.call(this, e);
            }
            c(e);
        }
    }
    H(docu, R + 'up', function() {
        t = 0
    });
    H(docu, R + 'move', function(e) {
        if (t) {
            t(e);
        }
    });
    MOVE = function(e) {
        var y = o = 0,
            i, s = "px",
            v = "ontouchstart";

        function W(r) {
            r = r || event;
            e = r.srcElement || r.target;
            i = e.style;
            h(r);
        }

        function h(w) {
            ke = i.position == "fixed";
            t = d;
            o = (w.pageX || w.x) - (ke ? (body[g] || de[g]) : 0), y = (w.pageY || w.y) - (ke ? (body[ve] || de[ve]) : 0);
        }

        function d(j) {
            var n = o,
                r = y;
            if (s) {
                h(j || event);
                i.left = e.offsetLeft + o - n + s, i.top = e.offsetTop + y - r + s;
            }
        }
        if (v in de) {
            H(e, v, W);
            H(e, 'ontouchmove', function(e) {
                e.preventDefault();
                e = e.touches;
                if (e.length == 1) {
                    d(e[0]);
                }
            });
        } else {
            H(e, R + 'down', W);
        }
        return {
            kill: function() {
                s = 0
            }
        }
    }
})();
window.onload = function() {
    MOVE(document.getElementById("move"))
}
		</script>
	</head>
	<body>
		<div id="move" style="position:absolute;padding:50px;background:red;">f</div>
	</body>
</html>

Conclusion :


S'il y a un problème, avertissez-moi ;)

PS : le ZIP contient les vieilles versions, par exemple la version 1.5 (555 OCTETS), pour ceux qui souhaitent une version plus courte, mais moins compatible avec les autres scripts et ne permettant pas le supprimer le 'drag'.

BUGS CONNUS


- Léger bug lorsque l'on scrolle la page durant un "drag" sur Internet Explorer pour les éléments position:absolute
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (jdmcreator)