Tengo problemas con un evento con jquery. Explico la situación:
- Tengo una imagen de un tablero (parecido al juego de la oca).
- La imagen está mapeada con <map> y <area>, que identifican unas casillas especiales, en los que tiene que ocurrir un evento al ponerse las fichas encima.
- Tiene dos fichas (con el atributo "draggables") que se pueden mover por el tablero libremente.
Lo que quiero es que al poner la ficha encima de la casilla surja el evento "dialog" de jquery, pero ese evento lo lanza siempre que suelto ("dropeo") la ficha, en cualquier lugar del tablero. Este es el código Jquery (falta el código del diálogo que lo suprimo para no abultar):
Código HTML:
<script> $(function() { $( "#ficha1" ).draggable(); $( "#ficha2" ).draggable(); }); $(function() { $( "#droppable" ).droppable({ drop: function( event ) { $( "#dialog" ).dialog( "open" ); return false; } }); }); </script>
Código HTML:
<div id="main" style="width:1030px; position:absolute; height:768px; background-color:#00FF00; z-index:1;"> <img src="imagenes/planoweb.jpg" border="0" usemap="#Map" alt="mapa" /> <map name="Map" id="Map"> <area id="droppable" shape="poly" coords="457,622,457,620,442,646,459,668,491,628" href="#" alt="casilla 4" /> </map> </div> <!-- Fichas --> <div id="ficha1" style="position:absolute; top:580px; left:550px; z-index:2;"> <img src="imagenes/ficha1.png" border="0" /> </div> <div id="ficha2" style="position:absolute; top:540px; left:550px; z-index:3;"> <img src="imagenes/ficha2.png" border="0" /> </div> <!-- Fin Fichas --> <!-- Dialogo de instrucciones --> <div id="dialog" title="Instrucciones del juego."> <p>Probando evento.</p> </div> <!-- Fin Dialogo de instrucciones -->
Muchas gracias de antemano.