Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

PROTOTYPE DE DRAG'N DROP


Information sur la source

Catégorie :Divers Classé sous : drag, souris, déplacement, position, prototype Niveau : Débutant Date de création : 16/04/2006 Date de mise à jour : 06/05/2006 03:49:17 Vu / téléchargé: 8 313 / 910

Note :
8 / 10 - par 4 personnes
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (21)
Ajouter un commentaire et/ou une note

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

  • ********************
  • *** 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>
********************
*** 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.
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

16 avril 2006 06:11:24 :
--
24 avril 2006 05:41:32 :
Maintenant compatible avec FireFox, merci Bultez pour ta modif!
27 avril 2006 06:54:31 :
Plus besoin de définir autre chose que la classe pour configurer un drag'n'drop
27 avril 2006 07:00:42 :
Mis à jour le zip
06 mai 2006 03:49:17 :
Ajout de commentaires

Commentaires et avis

signaler à un administrateur
Commentaire de DyoChris le 18/04/2006 09:44:57

tu as essayé sur FireFox? Parce que chez moi, ça drag pas

Je ne comprend pas pourquoi tant de gens oublient FF! C'est comme vendre de l'essence pour les 2CV et inutilisable pour les Ferrari!

  

signaler à un administrateur
Commentaire de bultez le 18/04/2006 12:58:06


à Dyochris :
plutôt que de critiquer bêtement avec des arguments
douteux/fallacieux... on propose des améliorations,
c'est plus  dans l'esprit de CodesSources il me semble...

à FasteX_ :
quelques petite modifs insignifantes pour que
FireFox soit content ( non exhaustives, pas tout testé )

<style type="text/css">
.moveable {...
}
</style>

<span class="moveable" style="left:100;top:100;width:100;height:100;"
onmousedown="initCoord(this,event);" onmousemove="dragElement(this,event);" onmouseup="initConditions(this,event);"
onselectstart="return false;">

function dragElement(element,event) {
   if (canMove[getN(element)]) {
     dragX(element,event)
     dragY(element,event)
   }
}
....

@+

signaler à un administrateur
Commentaire de FasteX_ le 18/04/2006 23:32:21

à Bultez: Pourrais-tu m'expliquer en quoi est nécéssaire l'argument 'event' (car avec IE ca marche pas) ?. Décidement, cette guerre d'incompatibiltés entre les navigateurs m'agace de plus en plus...

signaler à un administrateur
Commentaire de bultez le 19/04/2006 07:16:22

salut FasteX_,

rien d'autre à ajouter que ce que j'ai donné...

function dragElement(element,event)...
     dragX(element,event)
     dragY(element,event)...
function dragX(element,event)...
function dragY(element,event)...
function initCoord(element,event)...
<span class="moveable"
style="left:100;top:100;width:100;height:100;"
onmousedown="initCoord(this,event);"
onmousemove="dragElement(this,event);"
onmouseup="initConditions(this,event);"
onselectstart="return false;">...

je t'envoie la page mise à jour par mail, si tu veux...

>>incompatibilités entre les navigateurs
c'est pénible, moins que certains inconditionnels...

@+

signaler à un administrateur
Commentaire de bultez le 27/04/2006 13:02:04

il ne reste plus qu'à faire de l'Orienté Objet,
par exemple !, pour appliquer aux span voulus,
et non pas à tous ( ce qui pourrait être génant ).

signaler à un administrateur
Commentaire de FasteX_ le 28/04/2006 02:45:29

C'est là que ma dernière modification intervient. J'ai rajouté une fonction qui configure tous les span ayant comme classe "moveable" en tant qu'objets déplaçables. Le fichier js s'occupe de tout dorénavant.

signaler à un administrateur
Commentaire de thedeejay le 03/05/2006 19:35:40

bonjour!
pour moi le zip est "endomagé!"
aidez moi!!!

signaler à un administrateur
Commentaire de FasteX_ le 03/05/2006 22:54:43

Moi ça marche, il y a dû avoir un erreur lorsque tu as téléchargé le fichier. Réessai, et si ça ne marche toujours pas, tu peux faire un copier-coller du code (attention aux noms de fichiers). A+

signaler à un administrateur
Commentaire de Optitech le 05/05/2006 18:47:29

Slt !

Bravo pour un prototype !

La seule chose que je regrete c'est le manque de commentaire pour essayer de l'améliorer !

signaler à un administrateur
Commentaire de FasteX_ le 06/05/2006 03:02:55

Merci pour le commentaire!

*Il faudrait bien que je commente mon code, ce qui sera fait sous peu*

signaler à un administrateur
Commentaire de cerede2000 le 06/05/2006 18:26:28

Je ne comprend pas je vien d'essayer sous firefix et ce ne fonctionne pas :(

signaler à un administrateur
Commentaire de FasteX_ le 06/05/2006 19:40:47

Salut cerede2000,

   Mon ancienne version a été améliorée pour être compatible FireFox. J'ai fait quelques petites modifications depuis. Pourrait-on me dire si les commandes comme "element.onmousemove = function() {...}" sont compatibles avec FireFox? Si ce n'est pas le cas, le problème est là.

signaler à un administrateur
Commentaire de FasteX_ le 06/05/2006 19:45:59

Petite note en passant, mon code est maintenant commenté pour faciliter la modification à ceux qui voudraient changer des choses. Bonne prog! :)

signaler à un administrateur
Commentaire de cerede2000 le 06/05/2006 19:52:53

Alors effectivement l'erreur qui ressort sous firefox c'est au niveau de:
s[i].onmousedown = function() {initCoord(this,event)}
s[i].onmousemove = function() {dragElement(this,event)}
s[i].onmouseout = initConditions
s[i].onmouseup = initConditions
Mais la je connai pas la correction possible

signaler à un administrateur
Commentaire de bultez le 07/05/2006 09:18:49

s[i].onmousedown = function(event) {initCoord(this,event)}
...
@+

signaler à un administrateur
Commentaire de cerede2000 le 07/05/2006 09:25:06

Ca change quelque chose mais ca ne fonctionne pas encore totalement!!

signaler à un administrateur
Commentaire de bultez le 07/05/2006 11:44:09

bien entendu sur tous les appels de ce type.

signaler à un administrateur
Commentaire de FasteX_ le 07/05/2006 17:18:40

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.. :)**

signaler à un administrateur
Commentaire de cerede2000 le 07/05/2006 17:29:33

Et selon moi, si tous le monde avait les meme standars ca serais quand meme beaucoup plus simple!!!

signaler à un administrateur
Commentaire de bultez le 08/05/2006 10:17:47


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 !

signaler à un administrateur
Commentaire de cerede2000 le 08/05/2006 10:19:58

Cool merci!!

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

position de la souris sur une image [ par golgoth ] Bonjour,Comment faire pour recuperer dans un lien la position de la souris sur une image quand je clic sur celle-ci ? Est ce possible ?Merci pour votr Modifier position de la souris [ par schub1015 ] Bonjour,j'aimerais savoir s'il est possible de modifier la position de la souris ?Merci pour vos réponses. Position de la souris [ par SDK_akira ] Bonjour ^^ Je cherche un moyen de recuperer la position de la souris en javascript, c'est possible ? (j'ai cherch&#233; mais je n'ai rien trouv&#233; Position souris et frames [ par PlasTicGoat ] bonjour, J'ai une page web compos&#233;e de 3 frames: - 1 principale - 1 bandeau en haut - 1 paneau &#224; gauche Je voudrais savoir pr&#233;cis&#23 deplacer des div avec la souris [ par reski_01 ] bonjour a tous, j'ai chercher partout mais je ne trouve pas comment modifier ce que j'ai pu collecter je voudra [DEPLACE]variable definie par la position de la souris [ par Ankaa1988 ] Bonjour a tous, je suis en train de me débattre pour trouver le moyen de modifier une variable en fonction de la position de la souris. je m'explique variable definie par la position de la souris [ par Ankaa1988 ] Bonjour a tous, je suis en train de me débattre pour trouver le moyen de modifier une variable en fonction de la position de la souris. je m'explique Connaître la position d'un input [ par kcin ] Salut à tous.Je vois de partout des codes permettant de connaître la position de la souris, mais existe t-il un code pour connaître la position d'un i Scrollbar et déplacement d'une image avec la souris [ par cepekinio ] Bonjour,Contexte : appli web J2EE (JSP/JVScript/java) .J'ai réaliser une sorte de visionneuse de document(au format jpg) et je viens d'implémenter une Position de la souris sur une image [ par REMqb ] Voila : comment obtenir la position X et Y de la souris quand elle est sur une image?


Nos sponsors

Sondage...

CalendriCode

Octobre 2008
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,281 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.