Participa en el blog!
Tabla de contenido
Hacer un objeto arrastrable con JQuery UI draggable, utilizando las opciones básicas.
Necesitamos descargar el framework jquery ui, en este caso damos por sentado que lo metemos en la carpeta jquery-ui-1.8.14.custom/
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>
Ingeniero informático y desarrollador de aplicaciones web. Experto en desarrollo web, Webmaster, e-commerce y SEO.