[HTML5] No entiendo el atributo draggable

Archivado
Antes de nada, decir que de esto se poco o nada. Pero quería probar algo sencillo que quiero usar en el trabajo. A modo de demostración, mover unas fotos de un sitio a otro (por ejemplo, muebles al lugar de la casa).

He ido a http://rendera.heroku.com/
He elegido el ejemplo de las imágenes y le he metido el código de ejemplo que he encontrado aquí: http://jqueryui.com/demos/draggable/#method-option

Y esto es lo que tengo de ejemplo:
<style type="text/css">
  #draggable
  </style>
  <script type="text/javascript">
  $(function() {
    $("#draggable").draggable();
  });
  </script>

<div id="images">
  <img id="red_flower" width="240" height="161" src="http://farm2.static.flickr.com/1018/1424347008_6121045b70_m.jpg" alt="A red flower">
  <img id="red_flower" width="240" height="161" src="http://farm4.static.flickr.com/3021/2509303531_3d154d2d03_m.jpg" alt="A white and purple flower">
  <img id="red_flower" width="240" height="161" src="http://farm2.static.flickr.com/1108/1423464589_e42c6182ac_m.jpg" alt="A white flower">
</div>
​


Entiendo que si en id pongo draggable, entonces ese elemento se podrá mover. Y pruebo y funciona. Pero sólo con uno. Si pongo la misma etiqueta a los 3 elementos, sólo el primero mantiene esa capacidad.
¿Qué más debo añadir para que los 3 elementos tengan la posibilidad de moverse?

Repito que sé poco de código, pero ver que funciona con una de las imágenes y no las otras... me deja un poco pensando que me dejo algo que debe de ser obvio para cualquier entendido.

Gracias por la ayuda.
En CSS, "id" se usa para identificar sólo 1 elemento, no puedes usarlo con varios, sólo 1 elemento puede llevar "id". Para aplicar el mismo estilo a varios elementos se usa "class" (los id se definen en CSS con la almohadilla "#" y los class con el punto ".").

Por otra parte, el código de la página esa que has puesto usa la librería de javascript jQuery, si no la cargas con src no va a funcionar. Es decir, en la head tendrás que tener algo así como:

<script type="text/javascript" src="jquery.js">


Pero no me preguntes de jQuery porque no la he usado nunca [+risas]
Bueno, básicamente quería tener una serie de imágenes para arrastrar a 4 zonas de la página (como para clasificar, digamos). Y gracias a tu comentario ya lo he conseguido. Seguiré investigando, porque esto puede dar mucho juego, pero por ahora... GRACIAS.
You're welcome [beer]
Ya por casualidad no sabrás si es posible que un elemento (una imagen) después de moverse cambie de tamaño (a más grande, digamos, arrastrar miniatura y al llegar al punto X crece hasta su tamaño real o uno que yo establezca), no?
O algún efecto tipo iPhone, donde puedes aumentar el tamaño de una foto con sólo estirarla con los dedos...
(es que me vendría de perlas para dejar bonito bonito lo que quiero hacer pero por más que busco, no veo nada relacionado con alguna etiqueta como "resizable" o algo así).
4 respuestas
Archivado
Volver a General