jquery ui sortable recevoir(e,ui), comment puis-je obtenir un enfant à l'arrivée de l'élément, de sorte que je peux montrer() il?

Je suis à l'aide de l'événement de réception de ma liste triable, j'ai besoin de l'événement pour être en mesure de changer le style de l'un des éléments enfants de l'élément lorsqu'il est tiré à partir d'un déplaçable. Voici un exemple simplifié:

    <ul id="sortable">
      <li>element1<div class="child"></div></li>
      <li>element2<div class="child"></div></li>
    <ul>

    <ul id="draggable">
      <li>element3<div class="child"></div></li>
      <li>element4<div class="child"></div></li>
    <ul>

Avec JS:

    $('#sortable').sortable(
    {
          //extra stuff excluded

              receive: function(e, ui)
                         {
                            //how do I use ui to get the child element "child"?
                            //also I need to be able to style the current li element
                         }
    }
);

    $('#draggable').draggable(
            {
          connectToSortable: '#sortable'
            }
    );

*Problème Résolu: la Réponse est affichée ci-dessous par Frédéric Hamidi, mais en bref, la réponse est d'utiliser l'événement d'arrêt plutôt que de la recevoir de l'événement sur la sortable.

  • Veuillez faire une console.log(ui); au sein de la fonction réception et après de quoi il en retourne
  • Pouvez-vous s'il vous plaît créer jsFiddle pour la même chose??
  • "Recevoir déclenche lorsqu'un connecté liste triable a reçu un article à partir d'une autre liste."
  • voici le jsfiddle: jsfiddle.net/spensimon/PeS2D/337 Il semble que ça fonctionne avec une solution affiché ci-dessous, mais mon principal problème est de ne pas changer l'enfant de l'élément sur le nouveau élément traîné, mais sur l'ancien élément d'origine. J'ai besoin de la nouvellement élément traîné à l'enfant l'a changé. Ma configuration est fondamentalement la même, comme ça, alors j'ai besoin de l'élément d'origine de séjour, de sorte qu'il peut être traîné sur plusieurs fois (il y aura des doublons)
InformationsquelleAutor ytudfollac | 2012-07-26
  1. 4

    Dans le receive événement, ui.item contiendra un objet jQuery habillage de l'élément traîné. Vous pouvez utiliser enfants (les) ou find() avec un sélecteur de classe pour correspondre à son élément enfant:

    $("#sortable").sortable({
    receive: function(e, ui) {
        ui.item.css("color", "red");        //For example.
        ui.item.children(".child").show();  //Show child <div>.
    }
});

    Mise à jour: Puisque vous êtes cloné à l'aide d'un helper, vous pouvez utiliser ui.helper au lieu de ui.item. Cependant, cela ne semble pas donner de bons résultats (peut-être parce que l'aide provient d'un autre widget).

    Une autre solution est de gérer la stop de l'événement au lieu de receive. Là, ui.item est toujours l'élément nouveau, indépendamment de l'aide en fonction des options:

    $("#sortable").sortable({
    helper: "clone",
    items: "li",
    stop: function(e, ui) {
        ui.item.children(".child").show();
    }
});

    Vous trouverez une mise à jour de violon ici.

    • hey, voici le jsfiddle: jsfiddle.net/spensimon/PeS2D/337 j'ai besoin de l'copié traîné éléments à la personne ayant l'élément enfant montre bien que, dans ce cas, l'original déplaçable éléments enfants sont ceux qui sont touchés. Merci pour votre aide!
    • En effet, la cloné helper complique un peu les choses. Voir ma réponse mis à jour.
    • C'est vraiment ce que je cherchais! Regarde comme je vais avoir à déplacer des choses autour de mon code, mais je pense que je peux l'obtenir pour travailler la façon dont je le veux. Aucune idée sur la manière de changer le css de l'interface utilisateur.élément? J'ai mis "de l'interface utilisateur.de l'élément.css("color", "red");" là-bas et il est toujours en évolution l'original, pas l'élément nouveau?
    • étrange, ui.item.css(...) fonctionne pour moi (violon). Quel navigateur utilisez-vous?
    • haha, désolé, je l'ai collé dans le mauvais violon! fonctionne maintenant. Merci!
    • Excellente solution ! Thumbs up (y)

    InformationsquelleAutor Frédéric Hamidi
  2. 0

    Essayez d'utiliser l'interface utilisateur.propriétés de l'élément. À partir de jquery.spécification de l'interface utilisateur: l'interface utilisateur.article - le courant élément traîné.

    receive: function(e, ui){
             var content = $(ui.item).children('div.child').html();
         }
    InformationsquelleAutor vadim
  3. 0

    Vous pouvez utiliser la fonction d'arrêt sur la Sortable Plugin pour accéder à l'Élément est placé dans la liste.

    $('#sortable').sortable(
{
    stop: function( event, ui )
{
    $(ui.item).html('your content here');
}
});
    InformationsquelleAutor Blake Compton