2010-04-21 4 views
0

J'essaie de développer un comportement de glisser-déposer basé sur le comportement de l'interface utilisateur jQuery, mais je suis en train de rencontrer quelques blocages. Je veux être capable de faire glisser plusieurs images avec des zones transparentes autour d'une région de l'écran. Je veux que l'utilisateur soit capable de faire glisser l'image qu'il clique et non pas n'importe quel div divisible ou PNG qui soit indexé sur le dessus.Comportement de glisser-déposer jQuery avec une image partiellement transparente

L'image ci-dessous est une capture d'écran de ma page de test. Si je clique sur la partie inférieure gauche du carré bleu à travers la chose rouge, je devrais faire glisser le carré et non le truc rouge. La chose rouge est ce qui est traîné parce que c'est sur le dessus et le navigateur ne se soucie pas de la transparence. Ma question est, comment puis-je le faire se comporter comme prévu dans cette situation et faire glisser le carré à la place?

Modifier: Images ajoutées
http://i42.tinypic.com/r1g4sk.png

Répondre

0

Si vous développez pour les navigateurs qui prennent en charge <toile>, vous pouvez essayer

  1. trouver les coordonnées du curseur par rapport à la plus haute l'image
  2. Chargez l'image dans une toile < > en utilisant drawImage()
  3. Obtenez la valeur de transparence (alpha) pour e pixel au niveau des coordonnées

Répétez l'opération pour chaque image jusqu'à ce que vous en trouviez une qui n'est pas transparente à l'endroit où l'utilisateur a cliqué.

Questions connexes