Wie auf die ID des ziehbaren Elements zugreifen, das in sortierbare

Question

abgelegt wird Ich verwende die JQuery-Bibliotheken zum Implementieren von Ziehen und Ablegen.

Wie bekomme ich das Element, das gezogen wird, wenn es in sortierbare Liste abgelegt wird?

Ich möchte die ID des div gezogen werden. Das folgende Element gezogen wird:

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

Ich habe die Standardfunktion von ihrem Beispiel ziehen

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

Funktion Anschlagabschnitt mit dem nächsten Code Rückkehr richtigen Wert

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

in Schleppen Und das ist Sortierbares Element:

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

und seine Funktion:

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

ich verschiedene ui.id etc versucht haben, die nicht zu funktionieren scheint.

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

wirft undefined.

---

aktualisieren:

Sorry, mein Fehler :) Als meine Mutter zu sagen, verwendet - "API Lesen Sie vor der Codierung". ui.item.attr('id') funktioniert gut.

Answer 1

Versuchen

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

Nach der Dokumentation der (in der Tat alle Rückrufe für sortierbar) erhalten zwei Argumente erhalten. Das zweite Argument sollte enthalten:

• ui.helper - den aktuellen Helfer Element (meist ein Klon des Artikel)
• ui.position - aktuelle Position des Helfer
• ui.offset - aktuelle absolute Position des Helfers
• ui.item - das aktuelle gezogene Element
• ui.placeholder - der Platzhalter (wenn Sie ein definiert)
• ui.Absender - die sortierbar, wo die Artikel herkommt (besteht nur, wenn Sie sich von einer verbundenen Liste andere)

Answer 2

Aus dem jQuery UI ziehbar docs:

Wenn Sie nicht nur ziehen wollen , aber Ziehen und Ablegen, siehe die jQuery UI Droppable-Plugin, das ein Drop-Ziel für ziehbare Objekte bietet.

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

Answer 3

Ich hatte ein ähnliches Problem, und hatte Probleme das Helfer Element im Startereignis zugreifen. Am Ende habe ich das Helfer-Attribut auf eine Funktion gesetzt, die etwas benutzerdefiniertes HTML zurückgegeben hat. Ich konnte auf dieses HTML im Start-Event problemlos zugreifen.

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

Answer 4

Scheint ein bisschen hacky - aber es hat geklappt! Ich muss $ ('. Dragrow1 li: last') verwenden

Answer 5

Es scheint wie die context von ui.item wechselt zwischen dem beforeStop Ereignis und receive Ereignis.

In meinem Fall ich versuche, die ID des Elements zu einem erzeugten Wert und

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

nicht funktioniert für mich

So können Sie dieses Problem umgehen zu setzen:

beforeStop: function (event, ui) { itemContext = ui.item.context;}, 
receive: function (event, ui) { $(itemContext).attr("id", "control" + currentControlId++);} 

Answer 6

Ja, das ist ein Problem beim Mischen von sortierbaren Ziehhilfen, Droplets usw. Sortiert Container auch als abwerfbar:

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

die

Answer 7

arbeiten sollte ich hatte Erfolg mit dem beforeStop Ereignis für die sortierbar.

Von here

beforeStop: Dieses Ereignis wird ausgelöst, wenn Stopps Sortierung, aber wenn der Platzhalter/Helfer noch verfügbar ist.

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

Sie können eine benutzerdefinierte Daten verwenden, schreiben die ID der gezogene Elemente zu speichern. Dieses Attribut ist immer noch auf den abgeworfenen Elementen vorhanden. Der Quellcode wie folgt:

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

Mit $('dropped item").data('id') in der sortierbare die ID erhalten wie:

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