Saltar al contenido
Codifíca.me | Desarrollo web | Programación
JavaScript

Cómo hacer un objeto arrastrable con JQuery UI draggable

29 noviembre, 2016

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>