Comment accéder à l'id de l'élément déplaçable qui est tombé dans sortable

Je suis à l'aide de JQuery libs à mettre en œuvre de glisser-déposer.

Comment puis-je obtenir l'élément qui est déplacée lorsqu'elle est tombée dans une liste triable?

Je veux obtenir l'id de la div glissé. L'élément suivant est tiré:

<div class="control" id="control[1]" >
  <img src="img/controls/textfield.png" />
</div>

J'ai le standard glisser fonction de leur exemple

$(".control").draggable({
  connectToSortable: '#sortable',
  helper: 'clone'
});

fonction d'arrêt en faisant glisser la section avec le code de retour de la valeur ajoutée

stop: function(event, ui) {
  alert(ui.helper.attr('id'));
}

Et c'est triable élément:

<ul id="sortable"><li>test</li></ul>

et sa fonction:

$("#sortable").sortable({
  revert: true,
  accept: '.control',
  receive: function(event, ui) { 
    //here i need to get draggable element id
  }
});

J'ai essayé diverses de l'interface utilisateur.id, etc, qui ne semble pas fonctionner.

receive: function(event, ui) { 
  $(ui.draggable).attr("id")
}

jette undefined.

Mise à jour:

Désolé, ma faute 🙂 Comme ma mère avait l'habitude de dire - "Lecture de l'API avant de coder". ui.item.attr('id') fonctionne très bien.

OriginalL'auteur | 2009-03-19

  1. 25

    Essayer

    receive: function(event, ui) { 
  $(ui.item).attr("id")
}

    Selon la documentation de la recevoir (en effet tous rappels pour triable) obtenir deux arguments. Le deuxième argument doit contenir:

    • de l'interface utilisateur.aide - le courant helper
      élément (le plus souvent un clone de l'
      élément)
    • de l'interface utilisateur.position - position actuelle de la
      helper
    • de l'interface utilisateur.le décalage de position absolue actuelle
      de l'aide
    • de l'interface utilisateur.article - le courant élément traîné
    • de l'interface utilisateur.espace réservé - l'espace réservé (si
      vous en avez défini un)
    • de l'interface utilisateur.l'expéditeur de la sortable où l'
      poste provient de (n'existe que si vous
      passer d'une liste des connectés de
      d'un autre)
    Pour un peu plus courte version, au lieu de ce $ui.l'élément).attr("id") vous pouvez utiliser cette interface utilisateur.de l'élément.attr("id")
    Merci pour la réponse, par la manière. Je ne pouvais pas trouver toute la documentation pour les attributs d'un élément, ou la façon d'y accéder.
    pour une raison quelconque, il n'est pas sur jqueryui.com où il serait judicieux d'y être.. semble être ici

    OriginalL'auteur Steerpike

  2. 8

    Il semble que la context de l'interface utilisateur.élément de change entre le beforeStop événement et receive événement.

    Dans mon cas, je suis en train de définir l'id de l'élément à une valeur générée et 

    receive: function (event, ui) { ui.item.attr("id", "control" + currentControlId++);}

    ne fonctionne pas pour moi

    De sorte que vous pouvez contourner cela :

    beforeStop: function (event, ui) { itemContext = ui.item.context;},
receive: function (event, ui) { $(itemContext).attr("id", "control" + currentControlId++);}
    Je vous remercie beaucoup. J'ai cherché toute la journée pour cette solution!
    Cela semble être un hack, mais ne semble pas fonctionner. Est-ce vraiment la meilleure façon de gérer l'ajout d'un id généré un élément li sur le déposer dans un sortable ul?

    OriginalL'auteur Catalin DICU

  3. 2

    J'ai eu un problème similaire, et a eu des ennuis accéder à l'aide de l'élément dans le début de l'événement. Ce que j'ai fait a été de déterminer l'aide de l'attribut d'une fonction qui a retourné des HTML personnalisé. J'ai été en mesure d'accéder à du contenu dans le début de l'événement sans aucun problèmes. 

    helper: function() {
    return '<div id="myHelper">This is my custom helper.</div>';
}

    OriginalL'auteur ironkeith

  4. 1

    De l'jQuery UI déplaçable docs:

    Si vous voulez pas de simplement faire glisser, mais
    glisser-déposer, voir le jQuery UI
    Droppable plugin, qui fournit une
    cible de dépôt pour draggables.

    Voir http://docs.jquery.com/UI/API/1.7/Droppable

    OriginalL'auteur karim79

  5. 1

    Oui, c'est un problème lorsque vous mélanger sortables draggables les droppables etc.
    Vous permettre d'organiser conteneur droppable ainsi:

    $("#sortable").sortable({
  revert: true,
  accept: '.control',
  receive: function(event, ui) { 
    //here i need to get draggable element id
  }
});

$('#sortable').droppable({
    accept: '.control',
    drop: function(e, ui){
        var your_draggable_element = $(ui.draggable);
        var your_helper = $(ui.helper);
    }
});

    qui devrait fonctionner

    OriginalL'auteur kami

  6. 1

    J'ai eu du succès à l'aide de la beforeStop événement pour le triable.

    De ici

    beforeStop: Cet événement est déclenché lorsque le tri s'arrête, mais quand l'espace réservé/helper est toujours disponible.

    $( "#something" ).sortable({
  beforeStop: function(event, ui) {
     //you should check if ui.item is indeed the one you want!
     item_id = $(ui.item).attr('id');
     $(ui.item).html('I'm changing the dropped element in the sortable!');
  }
});

    OriginalL'auteur Khawar

  7. 0

    Semble un peu hacky -, mais il a travaillé! Je dois utiliser $('.dragrow1 li:last')

    OriginalL'auteur WastedSpace

  8. 0

    Vous pouvez utiliser un attribut de données pour stocker l'id de l'traîné éléments. Cet attribut est toujours là sur les éléments déposés. Le code source de la manière suivante:

    <div class="..." data-id="item_id">
    ...
</div>

    À l'aide de $('dropped item").data('id') dans la sortable pour obtenir l'id comme:

    $("#sortable").sortable({
  ...,
  receive: function(e, ui) { 
      var id = ui.item.data('id');
  }
});

    OriginalL'auteur Mr2P

  9. -2
    $( "#sortable1" ).sortable({
  connectWith: ".connectedSortable",
  cancel: ".disabledItem",
  items: "li:not(.disabledItem)",
  receive: function(event,ui){

  **var page = ui.item.attr('value');**

  var user = $("#select_users").val();
    Veuillez fournir une explication de votre solution
    Tompsett bonjour, je suis le gars qui a marqué ce en tant que qualité. c'est un enfant de 2 ans incomplète post abandonnés par l'OP. Votre modification faite la poste un code non valide bloc contenant démarque des choses qui est une erreur de syntaxe. Merci de ne pas modifier, sauf si elle améliore la qualité sans faire empirer les choses.

    OriginalL'auteur nomasgabo