javascript - obtiene - drag and drop jquery ejemplos

Mover un elemento mediante programación con jQuery ordenable mientras se siguen desencadenando eventos

Question

Estoy usando jQuery ordenable. 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 programáticamente 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 desencadena los eventos clasificables como cambio o actualización. Tengo una función que se ejecuta en el evento de actualización del ordenable, pero mover el li con JS no desencadena esto.

¿Alguien sabe cómo desencadenar el evento de actualización ordenable?

Answer 1

Use el método de option de la clasificación (para recuperar sus devoluciones de llamada)

Como cada devolución de llamada de evento se define como una opción del widget ordenable, 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 configurar como nulo y el ui object debe definirse con todas las propiedades que espera la 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 haya definido (es decir, receive , change , etc.).

Trabajando JS-Fiddle

Answer 2

Aún más simple:

$(''#plan'').sortable(''refresh'');

Answer 3

El método de trigger acepta parámetros adicionales, por lo que si necesita el parámetro ui , tendrá que pasarlo por su cuenta. Pero generalmente solo quieres el ui.item objetivo, y en este caso, sabes lo que 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:

http://jsfiddle.net/D7fCz/3/

Answer 4

$("selector").trigger("sortupdate");

Tendrás que pasar como segundo argumento una función donde poner el evento y el evento ui no es tan importante como ui

el código interno del widget ordenable para desencadenar eventos se parece a esto

this._trigger("update", event, this._uiHash(this));

Por lo 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));
}