Antes de ir con algunos ejemplos prácticos, veamos un poco los metodos de Drag (Arrastrar) y Drop (Soltar) que tiene jQuery UI para nosotros.
1- Metodo draggable ()
El método draggable gestiona los elementos de una página HTML que deseas mover, este método puede ser usado de dos formas diferentes:
Veamos un ejemplo:
Primero debemos incluir los archivos necesarios, un error común que se comete es incluir el .js de jQuery UI antes del .js de jQuery, recuerden que jQuery es el core y jQuery UI son solo librerias, plugins, widgets, que sin el jQuery no funcionarían.
Invocamos el método:
Y lo asociamos al selector que será el div con el id="draggable".
Aquí les dejo el código fuente completo:
2- Método droppable ()
El método droppable gestiona los elementos de una página HTML los cuales deseas soltar en un área. Al igual que el método draggable, este puede ser usado de dos formas diferentes:
Veamos un ejemplo de este:
Incluímos los archivos, agregamos los estilos, invocamos los métodos (aquí usaremos el método draggable por igual) seguido del método droppable. Aquí el código fuente:
Y esta sería nuestra salida en el navegador:
¿Que tal sí unimos ambos conceptos en un ejemplo más complicado, algo así como un carrito de compras? Veamos:
Primero incluímos nuestros archivos:
Agregamos algunos estilos para nuestro carrito:
Usaremos el método accordion() igualmente de la librería de jQuery UI para hacer más llamativo nuestro carrito, invocamos nuestros métodos y los asociamos a los selectores, en este caso extenderemos toda la funcionalidad del metodo draggable a una lista:
Y así se vería nuestro carrito de compras:
Para que lo puedan probar aquí les dejo el código fuente completo:
1- Metodo draggable ()
El método draggable gestiona los elementos de una página HTML que deseas mover, este método puede ser usado de dos formas diferentes:
• $(selector, context).draggable (options)
• $(selector, context).draggable ("action", params)
Veamos un ejemplo:
Primero debemos incluir los archivos necesarios, un error común que se comete es incluir el .js de jQuery UI antes del .js de jQuery, recuerden que jQuery es el core y jQuery UI son solo librerias, plugins, widgets, que sin el jQuery no funcionarían.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" />
Invocamos el método:
$(function() {
$( "#draggable" ).draggable();
});
Y lo asociamos al selector que será el div con el id="draggable".
<div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div>
Aquí les dejo el código fuente completo:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
2- Método droppable ()
El método droppable gestiona los elementos de una página HTML los cuales deseas soltar en un área. Al igual que el método draggable, este puede ser usado de dos formas diferentes:
• $(selector, context).droppable (options)
• $(selector, context).droppable ("action", params)
Veamos un ejemplo de este:
Incluímos los archivos, agregamos los estilos, invocamos los métodos (aquí usaremos el método draggable por igual) seguido del método droppable. Aquí el código fuente:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
Y esta sería nuestra salida en el navegador:
¿Que tal sí unimos ambos conceptos en un ejemplo más complicado, algo así como un carrito de compras? Veamos:
Primero incluímos nuestros archivos:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /
Agregamos algunos estilos para nuestro carrito:
<style>
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; }
#cart { width: 200px; float: left; margin-top: 1em; }
/* style the list to maximize the droppable hitarea */
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
</style>
Usaremos el método accordion() igualmente de la librería de jQuery UI para hacer más llamativo nuestro carrito, invocamos nuestros métodos y los asociamos a los selectores, en este caso extenderemos toda la funcionalidad del metodo draggable a una lista:
<script>
$(function() {
$( "#catalog" ).accordion();
$( "#catalog li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
active/hoverClass options
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
Y así se vería nuestro carrito de compras:
Para que lo puedan probar aquí les dejo el código fuente completo:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Shopping Cart Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; }
#cart { width: 200px; float: left; margin-top: 1em; }
/* style the list to maximize the droppable hitarea */
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
</style>
<script>
$(function() {
$( "#catalog" ).accordion();
$( "#catalog li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
active/hoverClass options
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
</head>
<body>
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h2><a href="#">T-Shirts</a></h2>
<div>
<ul>
<li>Lolcat Shirt</li>
<li>Cheezeburger Shirt</li>
<li>Buckit Shirt</li>
</ul>
</div>
<h2><a href="#">Bags</a></h2>
<div>
<ul>
<li>Zebra Striped</li>
<li>Black Leather</li>
<li>Alligator Leather</li>
</ul>
</div>
<h2><a href="#">Gadgets</a></h2>
<div>
<ul>
<li>iPhone</li>
<li>iPod</li>
<li>iPad</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
</body>
</html>
