Parcourir tout les Id qui commence par "dz_"

Version imprimable

22/03/2006, 14h49
FMaz

Parcourir tout les Id qui commence par "dz_"

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.

Code:

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_"

22/03/2006, 15h24
FMaz

Si je comprend bien, tu ajoute les résultat au tableau Dz_Obj ?
22/03/2006, 15h31
SpaceFrog

Voilà !
Ensuite pour parcourrir les dz ...

Code:

for (i=0;i<dz_Obj.lengthà{ alert(dz_Obj[i].id) }
22/03/2006, 15h54
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?
22/03/2006, 15h55
FMaz

Je suis pas certain de comprendre, tu pourrais me donner un exemple svp?
22/03/2006, 16h00
SpaceFrog

c'était pas la question ... :lol:

mais bon si monsieur drag and drop s'en mêle je m'eclispe :wink:
22/03/2006, 16h01
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)
22/03/2006, 16h03
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! :mrgreen:
22/03/2006, 16h07
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
22/03/2006, 16h18
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....
22/03/2006, 19h12
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) :wink:
22/03/2006, 19h31
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
23/03/2006, 13h10
javatwister

waouh! ça devient costaud là :ccool:

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;
23/03/2006, 13h24
Matthieu2000

Citation:

document.getElementsByTagname("div")

:idea:
23/03/2006, 14h18
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 ?
23/03/2006, 14h21
SpaceFrog

pourquoi ne mets tu pas ton image en background du div ?
23/03/2006, 14h25
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...
23/03/2006, 14h51
SpaceFrog

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

et pourquoi ne pas mettre le onmousedown et onmouseup directement sur la balise image ... ?
23/03/2006, 14h58
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)

Code:

1
2
3
4
5
6
var TabImages = document.Images
for (i=0;i<TabImages.length){
          if(TabImages[i].draggable=="1"){
              TabImages[i].setAttribute('onmousedown',function(){startDrag(this)})
TabImages[i].onmousedown=function(){startDrag(this)}
}

en ayant pris soin de mettre un attribut draggable='1' dasn les images bougeables ...

23/03/2006, 15h21
FMaz

Excellent, avec ca je devrais me débrouiller.

Je vais probablement faire une boucle qui vérifie si l'image est contenue dans un div qui a un ID qui commence par "dg". Si oui je vais mettre l'attribu. car ca reviend au même de mettre une propriété draggable="1" que de mettre un onmousedown ...
24/03/2006, 05h10
FMaz

Hyyyyyyyi Ha ! :D :D :D

Ca commence à ressembler à un beau script de Drag ca!
--> Pas de sélection de texte lors de déplacement
--> Pas de déplacement hératique
--> Support de Drop Zone authorisés pour chaque objet
--> Support d'action au moment du Drop
--> Testé IE et FF
--> Meme si dropé à l'extérieur de la fenêtre, c'est ok

Vous avez des idées pour régler les bugs qu'il reste ou pour l'amméliorer ?
www.cybercity2034.com/test.html

okok, je suis content de moi :roll: , c'est un de mes premiers JavaScript sérieux...
24/03/2006, 10h16
javatwister

pour info, la difficulté du mousemove avec les images, c'est que IE a ses propres événements de drag: ondragstart, ondrag, ondragend;
pour un système "universel", c'est difficile pour l'heure, sans prendre en compte les différences de fonctionnement des nav.

exemple que j'aime ressortir, suite à un topic ici même: http://javatwist.imingo.net/mouve.htm

(les images sont interchangeables)
24/03/2006, 13h10
FMaz

Je remarque que tu utilise:
document.onmousedown

et que moi j'utilise des:
document.addEventListener("mousedown"

Il y a un avantage de d'une méthode sur l'autre ?

Et dans ton cas, ce n'est QUE des images, moi s'il y a des images, je dois détecter si l'image est DANS une zone de drag (DG). C'est pour ca que c'est un peu complexe...
24/03/2006, 15h48
javatwister

Citation:

un peu complexe

pas nécessairement;

disons que tu vérifies que l'image est déplaçable (via une propriété initialisée auparavant) , au moment où tu harponnes; et quand tu relâche, tu vérifies que tu t'arrêtes sur une zone de drop (via une autre propriété initialisée auparavant...);
24/03/2006, 18h16
FMaz

Bah tu a juste inversé la problèmatique...
La fonction qui vérifie les images contenu dans une zone Dragable pour "tagger" l'image elle ?

Tant qu'a "tagger" l'image, je suis aussi bien de "convertir" l'image en div style="background-image:url(..)"
24/03/2006, 20h20
javatwister

bah, j'avoue que tant que ta page (tu proposes un jeu, non?) n'est pas plus parlante, je ne m'avance pas sur les possibilités de code...
j'attends donc;
24/03/2006, 21h46
FMaz

Le script doit être le plus universel possible, le plus flexible possible, et demande un minimum de configuration. Soit uniquement les DropZone et les DragZone.

Le script sera utilisé dans le but de gérer l'inventaire d'un personnage (équiper des items sur le corps du personnage), donc oui, un jeu... et des images.

Mais ceci dit: je ne veux pas faire ce script QUE pour cela. Il pourrait etre utilisé pour d'autre occasions

Fuseau horaire GMT +2. Il est actuellement 02h26.