iRec sortable

Hasta ahora vimos jQuery y jQueryMobile como soluciones practicas. El hermano incordioso de la familia es jQueryUI

jQueryUI tiene soluciones de interactividad, pero suele ser algo que no se usa en produccion a menos que se tome un buen tiempo en customizarlo. En nuestro caso solo necesitamos un widget: sortable. Afortunadamente cuando vamos a descargar jQueryUI podemos elegir que partes queremos.

Vayan a la pagina de descarga de jQueryUI y asegurense de solo tener tildado:

• UI Core: Core
• UI Core: Widget
• UI Core: Mouse
• UI Core: Position
• Interactions: Draggable
• Interactions: Droppable
• Interactions: Sortable Y descarguenlo. Deberia descargarles un archivo .zip del cual solo necesitamos el archivo jquery-ui.min.js

Touch events

Ahora bien, esto nos va a dar la funcionalidad de arrastrar y soltar (drag'n drop) de elementos, pero en dispositivos tactiles esto necesita una vuelta mas de rosca.

Encontre este ejemplo de alguien que ya mezclo los eventos touch con la funcionalidad sortable: http://forresst.github.io/2012/06/22/Make-a-list-jQuery-Mobile-sortable-by-drag-and-drop/

En el ejemplo se usa otra libreria: jQuery UI Touch Punch que tambien vamos a descargar, el vinculo esta en la pagina del ejemplo. Guardaremos el archivo en js/jquery.ui.touch-punch.min.js y lo incluiremos en nuestro index.html. Fijense que solo deben agregar la linea del medio, las otras las dejo para que se orienten:

    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="js/helpers.js"></script>

Inicialziar sortable

Ahora bien, necesitamos poder reordenar la lista de preguntas en #nueva-guia, entonces el codigo de inicializacion lo ubicaremos en el evento pagecreate (necesitamos que suceda solo una vez) de #nueva-guia. Al comienzo de la inicializacion de #nueva-guia, siguiendo el ejemplo, inicializamos nuestra lista (ul#preguntas) con .sortable. Nuevamente, dejo parte del codigo que no deben repetir, esta ahi para que ubiquen donde debe ir:

$('#nueva-guia').on('pagecreate', function(){
  console.log('pagecreate on nueva-guia');
  $( "#preguntas" ).sortable({
    axis: 'y'
  });
  $( "#preguntas" ).disableSelection();

  $( "#preguntas" ).on("sortstop", function(event, ui) {
    $('#preguntas').listview('refresh');
  });
//...

Tarea!