Déplacer un élément par programme avec jQuery triable tout en déclenchant toujours des événements

Question

Je suis à l'aide de jQuery Sortable. J'ai la configuration HTML comme ceci:

<ul id='plan'>
  <li class='item'>1</li>
  <li class='item'>2</li>
  <li class='item'>3</li>
  <li class='item'>4</li>
</ul>

Je veux déplacer par programmation un <li> à une position différente. Je peux réaliser avec les suivants JS:

$("#plan li:eq(1)").insertAfter($("#plan li:eq(2)"));

Cela fonctionne très bien sauf qu'il ne déclenche pas la triable des événements comme le changement ou mise à jour. J'ai une fonction qui est exécutée sur l'événement de mise à jour de la sortable, mais le déplacement de la li avec JS ne déclenche pas cette.

Personne ne sait comment déclencher la sortable événement de mise à jour?

Answer 1

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

vous devrez peut-être passer comme deuxième argument une fonction où mettre dans l'événement et l'interface utilisateur, l'événement n'est pas aussi important que l'interface utilisateur

le code interne du widget triable pour le déclenchement d'événements ressemble à ceci

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

Donc, vous voudrez peut-être faire après

 function triggerUpdateFor(selector) {
    var widget = $(selector).sortable("widget");
    if (widget) widget._trigger("update", null, widget._uiHash(widget));
}
 

Answer 2

Utiliser l' option méthode de la sortable (pour récupérer ses rappels)

Comme chaque événement de rappel est définie comme une option de la sortable widget, il peut être récupéré en tant que tel par l'appel de la méthode de l'option pour le correspondant de l'événement option de rappel (cet exemple utilise l' update rappel):

$('#plan').sortable({
  update: function(event, ui) {
    // Do something...
  }
});

$('#plan').sortable('option', 'update'); // returns function

La mise à jour de rappel attend deux paramètres, l' event et ui object. L' event peut être mis à null et l' ui object doit être défini avec toutes les propriétés de votre update callback attend:

$('#plan').sortable('option','update')(
  null,
  {
    item: $('<li>new item</li>').appendTo($('#plan'))
  }
);

Cela fonctionne pour tous les rappels d'événement que vous avez défini (c - receive, change etc.).

Travail JS-Violon

Answer 3

La méthode trigger accepte des paramètres supplémentaires, donc si vous avez besoin du paramètre ui , vous devrez le transmettre vous-même. Mais vous voulez généralement juste la cible ui.item , et dans ce cas, vous savez ce que c'est:

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

Démo:

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

Answer 4

Encore plus simple:

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