Comment accéder à l'ID de l'élément déplaçable qui est déposé dans un fichier triable

Question

J'utilise les bibliothèques JQuery pour implémenter le glisser-déposer.

Comment obtenir l'élément qui est déplacé lorsqu'il est déposé dans une liste triable?

Je veux que l'ID de la div soit déplacé. L'élément suivant est traîné:

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

J'ai la fonction standard faisant glisser de leur exemple

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

arrêt de la fonction

en faisant glisser la section avec retour de code suivant juste valeur

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

Et c'est élément triable:

<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é différents ui.id etc qui ne semble pas fonctionner.

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

lancers francs undefined.

---

Mise à jour:

Désolé, ma faute :) Comme ma mère l'habitude de dire - "API de lecture avant le codage". ui.item.attr('id') fonctionne très bien.

Answer 1

Essayez

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

Selon la documentation de réception (en effet tous callbacks pour triables) obtenir deux arguments. Le second argument doit contenir:

• ui.helper - l'élément aide courant (le plus souvent un clone de l'élément )
• ui.position - position actuelle de l'aide
• ui.offset - position absolue actuelle de l'aide
• ui.item - l'élément courant traîné
• de ui.placeholder - l'espace réservé (si vous avez défini une)
• ui.expéditeur - le triables où le élément vient (existe seulement si vous passage d'une liste connectée à autre)

Answer 2

De la documentation draggable jQuery UI:

Si vous voulez non seulement glisser , mais glisser-déposer, voir l'interface utilisateur jQuery Plugin Droppable, qui fournit une cible drop pour draggables.

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

Answer 3

j'ai eu un problème similaire, et avait des problèmes un accès l'élément d'aide en cas de départ. Ce que j'ai fini par faire était de définir l'attribut helper à une fonction qui renvoyait du code HTML personnalisé. J'ai été en mesure d'accéder à ce HTML dans l'événement de démarrage sans aucun problème.

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

Answer 4

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

Answer 5

Il semble que le context de ui.item change entre l'événement beforeStop et l'événement receive.

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

Vous pouvez contourner ceci:

Answer 6

Oui, c'est un problème lorsque vous mélangez des sortables draggables droppables, etc. Créez aussi un conteneur triable comme droppable:

$("#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

Answer 7

J'ai eu du succès en utilisant l'événement beforeStop pour le sortable.

De here

beforeStop: Cet événement est déclenché lors du tri des arrêts, mais quand l'espace réservé/aide 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!'); 
    } 
}); 

Answer 8

Vous pouvez utiliser un attribut personnalisé des données pour stocker l'ID des éléments glissés. Cet attribut est toujours présent sur les objets déposés. Le code source comme suit:

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

En utilisant $('dropped item").data('id') dans le sortable pour obtenir l'ID comme:

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

Answer 9

$("#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();