Ir al contenido principal

jQuery UI Combinar una lista Draggable con otra Sortable

Cuando estén trabajando con una lista de elementos "draggables" y estos vayan a ser colocados en una lista "sortable" es posible que si intentáis obtener el id del elemento que se esta moviendo os volváis locos de atar. ¿Por qué? Porque tanto al clonar como al trasladar el original, al generarse el helper omite dicho atributo, supongo que para evitar conflictos con los ids. Por lo tanto, si necesitamos de ese valor, lo que podemos hacer es asignarle el valor a otro atributo distinto. Me explico:
<ul id="lista_draggable">
<li title="mi_identificador 1">Elemento 1</li>
<li title="mi_identificador 2">Elemento 2</li>
<li title="mi_identificador 3">Elemento 3</li>
</ul>
<ul id="lista_sortable">
</ul>
Y el jQuery quedaría así:
$("#lista_draggable").draggable({

  connectToSortable: "#lista_sortable",

  helper: "clone"

});

$("#lista_sortable").sortable({

  stop: function (event, ui) {

    alert(ui.item.attr("title"));

  }

});

Podéis probar libremente a cambiar el atributo title por id y veréis que no hay manera de obtener dicho atributo. Eh! Pero que si alguien lo consigue que me lo diga que le coloco en un altar :)

Comentarios

Entradas populares de este blog

Formatear fecha JSON

Para poder representar de forma bonita y humana una fecha retornada por un JSON por ejemplo, la función quedaría tal que así. En mi caso, el formato esperado es: dd/MM/yyyy hh:mm

function FormatDate(fecha) { var fechaObj = new Date(fecha); return (fechaObj.getDate() < 10 ? '0' : '') + fechaObj.getDate() + '/' + (fechaObj.getMonth() < 10 ? '0' : '') + fechaObj.getMonth() + '/' + fechaObj.getYear() + ' ' + (fechaObj.getHours() < 10 ? '0' : '') + fechaObj.getHours() + ':' + (fechaObj.getMinutes() < 10 ? '0' : '') + fechaObj.getMinutes(); };

Generar números aleatorios con Postgres

Muchas veces nos encontraremos con que tenemos que poblar una BD con numeros para poder testear un funcionalidad que estemos programando. En postgres es tan sencillo como:

update schema.tabla set columnaNumerica = floor(random() * N) + desviacion;
Con desviación me refiero a que, si no lo añadimos, random generara numeros empezando por el 0 hasta N. El uso de floor es para redondear y quedarme solo con la parte entera. Ya que random genera floats entre 0 y 1.

Espero os sirva este pequeño truquillo. Un saludico.