Estoy usando jQuery Sortable. Tengo la configuración de HTML así:
<ul id='plan'> <li class='item'>1</li> <li class='item'>2</li> <li class='item'>3</li> <li class='item'>4</li> </ul> Quiero mover mediante programación un <li> a una posición diferente. Puedo lograr esto con el siguiente JS:
$("#plan li:eq(1)").insertAfter($("#plan li:eq(2)"));Esto funciona bien, excepto que no activa los eventos ordenables como cambio o actualización. Tengo una función que se ejecuta en el evento de actualización de ordenable, pero mover el li con JS no lo activa.
¿Alguien sabe cómo activar el evento de actualización ordenable?
$("selector").trigger("sortupdate");tal vez tendrá que pasar como segundo argumento una función donde colocar el evento y la interfaz de usuario, el evento no es tan importante como la interfaz de usuario
el código interno del widget clasificable para la activación de eventos se ve así
this._trigger("update", event, this._uiHash(this));Así que es posible que desee hacer lo siguiente
function triggerUpdateFor(selector) { var widget = $(selector).sortable("widget"); if (widget) widget._trigger("update", null, widget._uiHash(widget)); }option de ordenable (para recuperar sus devoluciones de llamada) Como cada devolución de llamada de evento se define como una opción del widget clasificable, se puede recuperar como tal llamando al método de opción para la opción de devolución de llamada de evento correspondiente (este ejemplo usa la devolución de llamada de update ):
$('#plan').sortable({ update: function(event, ui) { // Do something... } }); $('#plan').sortable('option', 'update'); // returns function La devolución de llamada de actualización espera dos parámetros , el event y un ui object . El event se puede establecer en nulo y el ui object debe definirse con todas las propiedades que espera su update callback :
$('#plan').sortable('option','update')( null, { item: $('<li>new item</li>').appendTo($('#plan')) } ); Esto funciona para todas las devoluciones de llamada de eventos que definió (es decir, receive , change , etc.).
El método de trigger acepta parámetros adicionales, por lo que si necesita el parámetro ui , deberá pasarlo usted mismo. Pero por lo general, solo desea el objetivo ui.item y, en este caso, sabe qué es:
var sortupdate = function (event, ui) { // do something with ui.item }; var $plan = $("#plan"); $plan.sortable({ update: sortupdate }); $plan.on("sortupdate", sortupdate); // sortupdate is not automatically bound var $item = $("#plan li:eq(1)"); $item.insertAfter($("#plan li:eq(2)")); $plan.trigger("sortupdate", { item : $item });Manifestación: