Codifíca.me | Desarrollo web | Programación | SEOCodifíca.me | Desarrollo web | Programación | SEO
  • Monetizar
    • Adsense
    • SEO
  • Desarrollo web
    • Php
    • WordPress
    • Blogger
    • Facebook (API)
      • Aplicación Test
      • Conectar con Facebook
      • Facebook en Español
      • Publicar Facebook
    • Google Maps
    • JavaScript
    • Opencart
    • Prestashop
    • XML
    • Flash
  • Bases de datos
    • Oracle
    • MySql
    • Data Mining
    • Forms
    • SGBD
  • Código
    • Android
    • Ensamblador
    • Código ensamblador
    • Java
    • ms-dos
    • Pro*C
    • Vb.net
  • Crear Blog
  • Cajon desastre
    • Redes
    • Arquitectura
    • Ubuntu
    • Hardware
    • Software
    • Consolas
    • Iphone
  • Tools
    • Get Backlinks
    • SQL 2 XML
    • Footprints enlaces
    • Whois
Ops! Hemos pasado los 1000 comentarios!!! Gracias a vosotros llevamos 1022 comentarios.
Participa en el blog!

Cómo hacer un objeto arrastrable con JQuery UI draggable

Se el primero en comentarJavaScript
Cómo hacer un objeto arrastrable con JQuery UI draggable
5 (100%) 1 vote

Tabla de contenido

  • 1 Hacer un objeto arrastrable con JQuery UI draggable
    • 1.1 Archivos
    • 1.2 index.html
      • 1.2.1 Comparte esto:

Hacer un objeto arrastrable con JQuery UI draggable

Hacer un objeto arrastrable con JQuery UI draggable, utilizando las opciones básicas.

Archivos

Necesitamos descargar el framework jquery ui, en este caso damos por sentado que lo metemos en la carpeta jquery-ui-1.8.14.custom/

  • index.html
  • jquery-ui-1.8.14.custom/

index.html

Necesitamos incluir jquery-1.5.1.js, jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js. Y por supuesto las hojas de estilo necesarias.

<html>
<head>
	<meta charset="utf-8">
	<title>Mover imagen con jQuery UI Draggable - WikiCode</title>
	<link rel="stylesheet" href="jquery-ui-1.8.14.custom/development-bundle/themes/base/jquery.ui.all.css">
	<script src="jquery-ui-1.8.14.custom/development-bundle/jquery-1.5.1.js"></script>
	<script src="jquery-ui-1.8.14.custom/development-bundle/ui/jquery.ui.core.js"></script>
	<script src="jquery-ui-1.8.14.custom/development-bundle/ui/jquery.ui.widget.js"></script>
	<script src="jquery-ui-1.8.14.custom/development-bundle/ui/jquery.ui.mouse.js"></script>
	<script src="jquery-ui-1.8.14.custom/development-bundle/ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="jquery-ui-1.8.14.custom/development-bundle/demos/demos.css">
	<script>
	$(function() {
		$( ".draggable" ).draggable();
	});
	</script>
</head>
<body>
<img class="draggable" src="wikicode.png"/>
</body>
</html>

<html> <head> <meta charset="utf-8"> <title>Mover imagen con jQuery UI Draggable - WikiCode</title> <link rel="stylesheet" href="jquery-ui-1.8.14.custom/development-bundle/themes/base/jquery.ui.all.css"> <script src="jquery-ui-1.8.14.custom/development-bundle/jquery-1.5.1.js"></script> <script src="jquery-ui-1.8.14.custom/development-bundle/ui/jquery.ui.core.js"></script> <script src="jquery-ui-1.8.14.custom/development-bundle/ui/jquery.ui.widget.js"></script> <script src="jquery-ui-1.8.14.custom/development-bundle/ui/jquery.ui.mouse.js"></script> <script src="jquery-ui-1.8.14.custom/development-bundle/ui/jquery.ui.draggable.js"></script> <link rel="stylesheet" href="jquery-ui-1.8.14.custom/development-bundle/demos/demos.css"> <script> $(function() { $( ".draggable" ).draggable(); }); </script> </head> <body> <img class="draggable" src="wikicode.png"/> </body> </html>

Miguel Ber
Miguel Ber Software Developer

Ingeniero informático y desarrollador de aplicaciones web. Experto en desarrollo web, Webmaster, e-commerce y SEO.

Code is {poetry}
¿Necesitas un desarrollador? Contáctame!
¿Tienes alguna pregunta? Te respondemos ya!!

Comparte esto:

  • Haz clic para compartir en Google+ (Se abre en una ventana nueva)
  • Haz clic para compartir en Twitter (Se abre en una ventana nueva)
  • Haz clic para compartir en Facebook (Se abre en una ventana nueva)
  • Haz clic para compartir en LinkedIn (Se abre en una ventana nueva)
  • Haz clic para compartir en Pinterest (Se abre en una ventana nueva)
  • Haz clic para compartir en Tumblr (Se abre en una ventana nueva)
  • Haz clic para enviar por correo electrónico a un amigo (Se abre en una ventana nueva)

Deja un comentario Cancelar respuesta

Tu dirección de correo electrónico no será publicada.

Síguenos en las redes

Facebook
Twitter
Google+
Skype
GitHub
  • El mejor ordenador para empezar a programar
  • dell Opinión sobre el portátil Dell XPS 13 Review
  • Los mejores routers WiFi
  • Comparando los sistemas de almacenamiento en la nube
  • discos duros el mejor Comparativas disco duros externos
  • ips Cómo utilizar mi servidor como proxy
codifica.me
Este sitio emplea cookies para prestar sus servicios, para personalizar anuncios y para analizar el tráfico. Si utilizas este sitio web, se sobreentiende que aceptas el uso de cookies..Accept Leer más
Privacidad y Política de Cookies
loading Cancelar
La entrada no fue enviada. ¡Comprueba tus direcciones de correo electrónico!
Error en la comprobación de email. Por favor, vuelve a intentarlo
Lo sentimos, tu blog no puede compartir entradas por correo electrónico.