Cargando

Ir a contenido


 


Drag & Drop con jQuery UI

Es bien sabido que en el mundo web implementar un Drag & Drop con JavaScript es un trabajo tortuoso y bastante laborioso, pero el famoso framework jQuery ha pensado en ello y a través de su extensión de librerías jQuery UI tendremos las cosas un poco más fáciles.


Escrito por el jun 20 2013 17:20 jquery ui jquery drag drop


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:

• $(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>


Imagen enviada


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:

Imagen enviada


¿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:

Imagen enviada


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>
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jun 20 2013 17:20
  •   Visitas 4.3K



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse