jQuery UI Draggable / Sortable - Obtenir la référence à un nouvel élément

Je suis à l'aide de l'INTERFACE utilisateur de jQuery Déplaçable/Sortable démo (http://jqueryui.com/demos/draggable/#sortable) pour la base de mon projet. J'ai besoin d'obtenir une référence à la <li> qui obtient cloné dans le triable lorsque le triable reçoit. J'ai essayé le triable de recevoir de l'événement, mais qui ne donne qu'une référence à l'origine déplaçable <li>et non pas son clone.

source d'informationauteur Mark Richman

  1. 30

    Dans la démo vous faites référence, il y a effectivement un bug, après vous faites glisser un élément vers le bas, il insère un cloné li avec un id qui est une copie de son frère dans les DOM, alors méfiez-vous (un bug a été déposée à ce sujet, mais il n'y a pas d'activité autour d'elle).

    J'ai fait quelques choses pour obtenir ceci:

    1. Pour contourner la limitation de la démo que j'ai décrit ci-dessus, au lieu d'appliquer un class à la déplaçable éléments qui seront liées à la sortable:

      <ul>
    <li class="new-item ui-state-highlight">Drag me down</li>
</ul>

    2. Faire des articles avec cette classe déplaçable, au lieu de sélectionner un élément par id:

       $(".new-item").draggable({
     connectToSortable: "#sortable",
     helper: "clone",
     revert: "invalid"
 });

    3. Puiser dans les stop événement de la sortable, et d'effectuer une simple logique sur l'élément qui a été abandonné, en misant sur le fait qu'un élément avec la classe new-item ne pouvait avoir été abandonné (et n'est pas simplement un élément existant dans le triable):

      $("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
        if (ui.item.hasClass("new-item")) {
            //This is a new item
            ui.item.removeClass("new-item");
            ui.item.html("<b>HI</b>");
        }
    }
});

    Notez que vous pouvez utiliser la data-* attribut au lieu de l'ajout d'une classe d'aide.

    Voici un exemple de travail: http://jsfiddle.net/andrewwhitaker/twFCu/

    Espère que ça aide.

  2. 1

    Et si vous voulez un autre très rugueux-et-prêt moyen d'obtenir que le point juste de les retirer ou de quelque chose, il suffit de le référencer dans la liste comme

    var _clone = $(".ui-draggable-dragging");

    Bien sûr que la classe est retiré juste APRÈS la chute, de sorte que la référence est perdu et vous ne pouvez pas faire quelque chose qui n'est pas immédiate.

    La réponse ci-dessus est plus solide, mais si vous êtes dans une folle ruée vers l'...

  3. 1

    Si vous n'avez pas peur accès à la Sortable'état interne, vous pouvez effectuer les opérations suivantes:

    $('#sortable').sortable({
  receive: function() {
    //Sortable.currentItem refers to the item just added.
    //jQuery UI < 1.10 uses "sortable" as its data key,
    //jQuery UI >= 1.10 defines an "instance" method to get the current instance.
    var $item =
      (
        $('#sortable').data('sortable') || //jQuery UI < 1.10
        $('#sortable').sortable('instance') //jQuery UI >= 1.10
      ).currentItem;
  }
);

    Violon: http://jsfiddle.net/t33bt/12/

    Gardez à l'esprit cependant, que cela ne peut pas fonctionner dans une future version de jQuery UI plus parce que il n'utilise pas l'officielle de l'API. Mais néanmoins il fonctionne même en jQuery UI 1.11 (version actuelle au moment de la rédaction).