Prototype de drag'n drop

Soyez le premier à donner votre avis sur cette source.

Vue 16 173 fois - Téléchargée 1 317 fois

Description

Un code qui, je crois, pourra servir à la réalisation de projets. Comme le titre l'indique, il s'agit d'un prototype de drag'n drop. Je l'ai simplifié du mieux que j'ai pu pour qu'on puisse le modifier, l'adapter, l'améliorer.

Source / Exemple :



      • dragndrop.js ***
/** Définition des variables utilisées **/ var z = 1 var startMouseX, startMouseY, startObjX, startObjY function configClass() { initConditions() // Valeurs initiales (aucun mouvement permis) /** Paramètres appliqués à tout les span ayant comme classe "moveable" **/ var s = document.getElementsByTagName("span") for (var i=0; i<s.length; i++) { if (s[i].className == "moveable") { s[i].onmousedown = function() {initCoord(this,event)} s[i].onmousemove = function() {dragElement(this,event)} s[i].onmouseout = initConditions s[i].onmouseup = initConditions } } } function initConditions() { /** Initialement, aucun objet ne peut bouger **/ canMove = new Array(GT("span").length) for (var i=0; i<GT("span").length; i++) { canMove[i] = false } } function initCoord(element, event) { canMove[getN(element)] = true //Permet l'élément de bouger startMouseX = event.clientX //Pos. X (souris) startMouseY = event.clientY //Pos. Y (souris) startObjX = size(element.style.left) //Pos. X (élément) startObjY = size(element.style.top) //Pos. Y (élément) bringFront(element) //Met l'élément au premier plan } function bringFront(element) { element.style.zIndex = z+=2 } function dragElement(element, event) { /** Si la condition le permet, le span suit la souris **/ if (event.button && canMove[getN(element)]) { dragX(element, event) dragY(element, event) } } function dragX(element, event) { /** Maintenir la distance entre le haut de l'objet et la souris (position X) **/ var dLeft = startMouseX - startObjX element.style.left = event.clientX - dLeft } function dragY(element, event) { /** Maintenir la distance entre le haut de l'objet et la souris (position Y) **/ var dTop = startMouseY - startObjY element.style.top = event.clientY - dTop } /** Récupère la position (ordre) d'un élément **/ function getN(element) { for (var i=0; i<GT("span").length; i++) { if (GT("span")[i] == element) return i } } /** Capture la valeur numérique d'une grandeur **/ function size(strSize) { if (strSize.indexOf("px") != -1) end = strSize.length - 2 else end = strSize.length return strSize.substring(0, end) } //////////////////////////////// // Pour raccourcir les lignes //////////////////////////////// function GT(tag) { return document.getElementsByTagName(tag) } function GE(id) { return document.getElementById(id) }
      • Drag'n'Drop.html ***
<html> <title>:: Drag'n'drop ::</title> <script type="text/JavaScript" src="dragndrop.js"></script> <style type="text/css"> .moveable { border: solid 1px; border-color: silver; padding: 5; background-color: #0050FF; color: white; position: absolute; cursor: default; width: 100px; height: 100px; } </style> <body onload="configClass();"> <nobr><span class="moveable" style="left:25;top:25;">1</span></nobr> <nobr><span class="moveable" style="left:125;top:25;">2</span></nobr> <nobr><span class="moveable" style="left:225;top:25;">3</span></nobr> <nobr><span class="moveable" style="left:25;top:125;">4</span></nobr> <nobr><span class="moveable" style="left:125;top:125;">5</span></nobr> <nobr><span class="moveable" style="left:225;top:125;">6</span></nobr> <nobr><span class="moveable" style="left:25;top:225;">7</span></nobr> <nobr><span class="moveable" style="left:125;top:225;">8</span></nobr> <nobr><span class="moveable" style="left:225;top:225;">9</span></nobr> </body> </html>

Conclusion :


Mon idée était relativement simple. Pour faire court: calculer la distance entre la souris et les bordures de l'objets lorsqu'on clique dessus, et conserver cette distance lors du déplacement de la souris.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
cerede2000 Messages postés 71 Date d'inscription vendredi 12 janvier 2007 Statut Membre Dernière intervention 6 septembre 2013
8 mai 2006 à 10:19
Cool merci!!
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 mai 2006 à 10:17
hélas... la compatibilité... et pas seulement avec JavaScript...

( java est loin d'être exempt : essayer de faire votre
déclaration d'impots, par exemple, pas sûr que vous puissiez !
ça va dépendre de votre système, de la version, de votre micro... )

bref, il reste d'autres erreurs dans le script
j'envoie à FasteX_ pour qu'il fignole ( j'ai fait "du brut" )
et mette à jour !
cerede2000 Messages postés 71 Date d'inscription vendredi 12 janvier 2007 Statut Membre Dernière intervention 6 septembre 2013
7 mai 2006 à 17:29
Et selon moi, si tous le monde avait les meme standars ca serais quand meme beaucoup plus simple!!!
FasteX_ Messages postés 44 Date d'inscription lundi 5 juillet 2004 Statut Membre Dernière intervention 29 février 2008
7 mai 2006 à 17:18
Ajouter 'event' comme argument cause une erreur de syntaxe, sur IE en tout cas.

Petite réflexion personnelle (lol):
**Selon moi, il faudrait que JavaScript ressemble un peu plus à Java côté portabilité. C'est-à-dire imposer un interpréteur universel! Celui où celle qui mettera ça au point aura mon admiration.. :)**
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
7 mai 2006 à 11:44
bien entendu sur tous les appels de ce type.
Afficher les 21 commentaires

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.