Saltar al contenido
JavaScript

C贸mo hacer un objeto arrastrable con JQuery UI draggable

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>