web-dev-qa-db-fra.com

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

J'utilise 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 souhaite déplacer par programme un <li> à une position différente. Je peux y parvenir avec le JS suivant:

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

Cela fonctionne bien, sauf qu'il ne déclenche pas les événements triables comme les modifications ou les mises à jour. J'ai une fonction qui s'exécute sur l'événement de mise à jour du triable mais déplacer le li avec JS ne déclenche pas cela.

Quelqu'un sait-il comment déclencher l'événement de mise à jour triable?

javascriptjqueryjquery-uijquery-ui-sortable
45
RailsSon
$("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));
}
16
Luke

Utilisez la méthode option du triable (pour récupérer ses rappels)

Comme chaque rappel d'événement est défini comme une option du widget triable, il peut être récupéré comme tel en appelant la méthode d'option pour l'option de rappel d'événement correspondante (cet exemple utilise le update rappeler):

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

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

Le rappel de mise à jour attend deux paramètres , le event et un ui object. event peut être défini sur null et 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énements que vous avez définis (c'est-à-dire receive, change etc.).

Travailler JS-Fiddle

9
flu

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/

7
hao

Encore plus simple:

$('#plan').sortable('refresh');
2
Craig Bartholomew