Prototype de drag'n drop

Soyez le premier à donner votre avis sur cette source.

Vue 15 838 fois - Téléchargée 1 303 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

Messages postés
71
Date d'inscription
vendredi 12 janvier 2007
Statut
Membre
Dernière intervention
6 septembre 2013

Cool merci!!
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
31
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 !
Messages postés
71
Date d'inscription
vendredi 12 janvier 2007
Statut
Membre
Dernière intervention
6 septembre 2013

Et selon moi, si tous le monde avait les meme standars ca serais quand meme beaucoup plus simple!!!
Messages postés
44
Date d'inscription
lundi 5 juillet 2004
Statut
Membre
Dernière intervention
29 février 2008

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.. :)**
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
31
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.