Cómo acceder a la identificación del elemento arrastrable que se suelta en ordenable

Question

Estoy usando las librerías de JQuery para implementar arrastrar y soltar.

¿Cómo puedo obtener el elemento que se está arrastrando cuando se coloca en la lista ordenable?

Quiero obtener la identificación del div que se arrastra. El siguiente elemento es arrastrado:

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

tengo el estándar de función de arrastrar de su ejemplo

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

parada función de arrastrar la sección con el siguiente código de retorno valor adecuado

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

y esto es elemento ordenable:

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

y su función:

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

He intentado varios ui.id, etc, que no parece funcionar.

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

throws undefined.

---

actualización:

Lo siento, mi culpa :) Como mi madre solía decir - "Leer API antes de la codificación". ui.item.attr('id') funciona bien.

Answer 1

Trate

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

De acuerdo con la documentación de la recepción (de hecho todas devoluciones de llamada para ordenable) obtener dos argumentos. El segundo argumento debe contener:

• ui.helper - la corriente elemento de ayuda (más a menudo un clon del elemento )
• ui.position - posición actual del ayudante
• ui.offset - posición absoluta actual del ayudante
• ui.item - el elemento actual arrastrado
• ui.placeholder - el marcador de posición (si ha definido uno)
• ui.emisor - la ordenable en el que el elemento proviene de (sólo existe si mueven de una lista conectada a otra)

Answer 2

De los jQuery UI documentos que pueden arrastrarse:

Si desea no sólo arrastre , pero arrastrar y soltar, consulte el jQuery UI plugin desplegable, que proporciona un destino de caída para arrastrar archivos.

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

Answer 3

tuve un problema similar, y tenía problemas con el acceso a elementos de ayuda en el evento de inicio. Lo que terminé haciendo fue configurar el atributo de ayudante a una función que devolvía algo de HTML personalizado. Pude acceder a ese HTML en el evento de inicio sin ningún problema.

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

Answer 4

Parece un poco hacky - pero funcionó! Tengo que usar $ ('. Dragrow1 li: last')

Answer 5

Parece que el context de ui.item cambia entre el evento beforeStop y el evento receive.

En mi caso estoy tratando de establecer el id del elemento a un valor generado y

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

no funciona para mí

para que pueda trabajar en torno a este:

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

Answer 6

Sí, eso es un problema cuando se mezclan los bloques arrastrables desplegable, etc. Hacer que el contenedor clasificable también se pueda arrastrar:

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

que debería funcionar

Answer 7

que tuvieron éxito en el uso de la caso beforeStop para el clasificable.

De here

beforeStop: Este evento se activa cuando se ordenan las paradas, pero cuando el marcador de posición/ayudante todavía está 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

Puede utilizar un encargo de datos de atributos para almacenar el id de los elementos arrastrados. Este atributo todavía está allí en los artículos caídos. El código fuente de la siguiente manera:

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

Usando $('dropped item").data('id') en el sortable para obtener el ID como:

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