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> |
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!!