¿Cómo crear elementos arrastrables con jQuery UI?

0

jQuery UI trae diversos widgets los cuales hacen uso de las funcionalidades también incluidas en el paquete de jQuery UI. Estas funcionalidades, si bien no son widgets, pueden ser utilizadas de manera independiente en cualquier página. En este caso, vamos a crear elementos arrastrables con jQuery, utilizando la funcionalidad que nos permitirá arrastrar objetos HTML. Para lograr esto, probaremos la funcionalidad de JQuery UI Draggable en un formulario ya creado, cuyo código pueden ver como archivo adjunto en el artículo.

Lo primero que haremos será acceder a la página de jQuery UI en la sección de “Demos”. En dicha sección, encontraremos una opción “Draggable” en la cual debemos hacer click. Una vez estemos en dicha sección, debemos hacer click en el vínculo “view source code” al costado de la imagen de un ojo:

ojo

Esto nos mostrará el código fuente que necesitaremos para poder realizar dicha acción. Lo primero que haremos, será copiar toda la cabecera <head> dentro de nuestro formulario para que quede de la siguiente forma:

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Con esto, hemos logrado vincular jQuery UI a nuestro formulario. Lo siguiente que haremos, será agregar ciertas etiquetas <div> a nuestro código, especialmente a las secciones que queramos que sean arrastrables. Cabe notar que debemos asignarle un id diferente a cada uno de estos <div> pero deben seguir el mismo patrón siempre, tal como se muestra a continuación:

<ul>
       <li>
            <h2>Contactanos</h2>
       </li>
	   <div id="draggable_nombre" class="ui-widget-content">
	   <li>
           <label for="name">Nombre:</label>
           <input type="text" name="nombre" placeholder="Jose Arenas" />
       </li>
	   </div>
       <div id="draggable_email" class="ui-widget-content">
	   <li>
           <label for="email">Email:</label>
           <input type="text" name="email" placeholder="jose@ejemplo.com" />
       </li>
	   </div>
       <div id="draggable_website" class="ui-widget-content">
	   <li>
           <label for="website">Sitio Web:</label>
           <input type="text" name="web" placeholder="http://tusitioweb.com" />
       </li>
	   </div>
       <div id="draggable_mensaje" class="ui-widget-content">
	   <li>
           <label for="Mensaje">Mensaje:</label>
           <textarea name="mensaje" cols="40" rows="6" ></textarea>
       </li>
	   </div>
        <div id="draggable_boton" class="ui-widget-content">
		<li>		
          <button class="submit" name="enviar" type="submit">Enviar</button>		
        </li>
		</div>
    </ul>

Una vez realizado este paso, debemos modificar el código jQuery dentro de la cabecera de nuestra página para que se adapte a la funcionalidad que queremos lograr. La modificación a realizar permitirá que se muestran arrastrar múltiples elementos los cuales deben comenzar con un id: “draggable_”. Esto lo lograremos de la siguiente forma:

<script>
  $(function() {
    $( "[id^=draggable]" ).draggable();
  });  
</script>

Ahora ya tenemos listo el código para poder probarlo. Basta con abrir el archivo .html resultante y empezar a arrastrar las secciones que hemos indicado que puedan ser arrastradas.

4

 

Comparte este post.
Artículos Recomendados Para Tí:

Escribe tu comentario