Discussion :

[FMaz]

je suis en train de créer un script de Drag and Drop avec des DropZone.

Donc lorsque le drag "cesse", je dois vérifier si la position courrante de l'élément en déplacement/du curseur est au dessus d'une DropZone.

Toute mes drop zone sont identifiés pas un ID qui commence par dz_ .Comment puis-je créer une boucle qui va trouver tout les éléments commencant pas dz_ ?

Question d'optimiser, normalement seul des DIV pourront être des drop zone.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var AllObj=document.getElementsByTagName('*')
var dz_Obj =new Array()
for (i=0;i<AllObj.length;i++){
      if (AllObj[i].id.substr(0,3)=="dz_"){dz_Obj.push(AllObj[i])}
}

dz_Obj sera alors la collection des objets dont l'id commence par "dz_"

[FMaz]

Si je comprend bien, tu ajoute les résultat au tableau Dz_Obj ?

[SpaceFrog]

Voilà !
Ensuite pour parcourrir les dz ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for (i=0;i<dz_Obj.lengthà{ alert(dz_Obj[i].id) }

[javatwister]

pourquoi as-tu besoin du tableau complet des dropzone?

pourquoi n'affectes-tu pas à chaque élément concerné une propriété arbitraire indiquant son statut?

[FMaz]

Je suis pas certain de comprendre, tu pourrais me donner un exemple svp?

[SpaceFrog]

c'était pas la question ...

mais bon si monsieur drag and drop s'en mêle je m'eclispe

[FMaz]

Monsieur Drag and Drop ?

Si tu est doué en Drag an Drop, j'aimerais bien te passer mon script pour que tu y jette un coup d'oeil, il est fonctionnel, j'aimerais juste l'améliorrer (optimisation, etc)

[javatwister]

non non, loin de moi l'envie d'influer sur le projet de FMaz, mais je me dis: euh... en fait, j'aimerais bien voir ta page!

[FMaz]

www.cybercity2034.com/test.html

... influer, si ca permet de s'améliorrer, c'est excellent. Je ne suis pas un expert en javascript, donc s'il y a des améliorations à apporter, je préfère le savoir que de penser que je suis bon à tord et à travers ;p

[FMaz]

J'ai cependant un souci "majeur"... les images:

<div onmousedown="start_drag(this,'dz01,dz03');" style="position:absolute;background-color:red;width:100px;height:100px;">
Drag me !
<img src="item23498723.png" />
</div>

Le div ne détecte pas de "onmousedown" car ce dernier est fait sur l'image.
Je ne vois vraiment pas comment faire pour éviter de mettre des start_drag dans tout mes sous-éléments....

[javatwister]

ton objectif final, c'est de faire quoi? comme type de page, je veux dire;

parce que si tu multiplie les objets déplaçables et les zones de drop, tu vas au devant d'un code répétitif et difficile à mettre à jour (déjà que tu as qqs bugs à résoudre)

[FMaz]

Il s'agiera d'un jeu ou le visiteur peut glisser des items de son inventaire vers une silouette pour équiper l'item en question.

A savoir que je viend de commencer le script, il est pas terminé ;p
Pour les bugs, hésite pas à m'en faire une liste ;p

[javatwister]

waouh! ça devient costaud là

pour les bugs d'hier, c'était une histoire de drags en dehors de la page provoquant des comportements aberrants;

j'ai hâte de voir le résultat final;

[Matthieu2000]

document.getElementsByTagname("div")

[FMaz]

javatwister: Maintenant je crois que c'est réglé:
- Le code semble fonctionner sous IE et sous FF
- Il n'y a plus de déplacement vers l'infini
- Le code est plus propre
- Tout est configurable directement à partir des id des divs


Mais il reste encore un problème qui me gène énormément.
Si mon Div contiend une image, le div ne détecte pas le click... car il est pas sur le div mais sur l'image.

Donc j'ai essayé de surveiller tout les mousedown du document, et lorsque ca arrive, de rechercher les zone DG (DraGable) qui se trouverais sous la position du curseur. Mais même la, le click semble pas bien détecté.

Donc plutot que de mettre une image, je met un div de taille fixe avec un background-image:url('...'); Mais c'est contraignant.


--> Comment détecté un mousedown PARTOUT, même sur une image ?

[SpaceFrog]

pourquoi ne mets tu pas ton image en background du div ?

[FMaz]

^^ Heu, ta du oublier un bout du message, je te le met en gras ;p

2 raisons:
- Parceque ca me force à devoir connaitre la taille de l'image à l'avance. Un zone image prendra la taille de l'image, un background non.
- Pour la transparence et les effects de couches (superposition d'une image à une autre).
S'il y avait moyen d'attacher un onmousedown à tout les images, je crois que je pourrais m'en sortir...

[SpaceFrog]

vaut mieux y voir comme ça que comme une taupe ...

et pourquoi ne pas mettre le onmousedown et onmouseup directement sur la balise image ... ?

[FMaz]

En fait j'essaie de concevoir un système universel car la page et les éléments seront généré dynamiquement (en php).

Donc commencer à rechercher dans chaque éléments à dragger tout les images qu'il pourrait y avoir pour y ajouter des tags onmousedown, c'est très chiant pour rien.

N'est t'il pas possible de faire quelque chose du genre:
document.getElementsByTagName('img').addEventListener('onmousedown',fct_verifier_si_limage_est_dans_un_DG_si_oui_commencer_le_drag,false);

Ha ouais, et pour FF, le addEventListener, j'ai lu la doc mais je comprend toujours pas à quoi sert le 3ieme parametre (capture: true/false)