Estoy usando el JQuery librerías para implementar la función de arrastrar y soltar.

¿Cómo puedo obtener el elemento que está siendo arrastrado cuando se dejó caer en la lista que se puede ordenar?

Quiero obtener el id del div que se está arrastrando. El siguiente elemento es arrastrado:

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

Tengo el estándar arrastrando función de su ejemplo

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

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

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

Y este es ordenable elemento:

<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 probado varios de interfaz de usuario.id etc que no parece funcionar.

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

lanza undefined.


Actualización:

Lo siento, es mi culpa 🙂 Como mi madre solía decir – «Leer API antes de codificación». ui.item.attr('id') funciona bien.

OriginalEl autor | 2009-03-19

9 Comentarios

  1. 25

    Intentar

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

    De acuerdo a la documentación que la recibe (de hecho todos devoluciones de llamada para ordenable) obtener dos argumentos. El segundo argumento debe contener:

    • interfaz de usuario.ayudante – auxiliar de
      elemento (más a menudo es un clon de la
      elemento)
    • interfaz de usuario.posición – posición actual de la
      ayudante
    • interfaz de usuario.desplazamiento actual posición absoluta
      de la auxiliar de
    • interfaz de usuario.elemento – el elemento arrastrado
    • interfaz de usuario.marcador de posición – el marcador de posición (si
      definió uno)
    • interfaz de usuario.remitente – el ordenable donde el
      elemento viene (sólo existe si
      pasar de uno conectado a lista
      otro)
    Para un poco más corta-de la mano de la versión, en lugar de esto $(interfaz de usuario.elemento).attr(«id») puede utilizar esta interfaz de usuario.elemento.attr(«id»)
    Gracias por la respuesta, por cierto. No podía encontrar ninguna documentación para los atributos de un elemento o cómo acceder a ellos.
    por alguna razón no está en jqueryui.com donde tendría sentido.. parece ser aquí

    OriginalEl autor Steerpike

  2. 8

    Parece que el context de la interfaz de usuario.elemento de los cambios entre el beforeStop evento y receive evento.

    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 me funciona

    Así que usted puede evitar este :

    beforeStop: function (event, ui) { itemContext = ui.item.context;},
    receive: function (event, ui) { $(itemContext).attr("id", "control" + currentControlId++);}
    Muchas gracias. He estado buscando todo el día para esta solución!
    Esto parece un hack, pero no parece funcionar. Es esta realmente la mejor manera de atender a un id generado por un elemento de li al caer dentro de una ordenable ul?

    OriginalEl autor Catalin DICU

  3. 2

    He tenido un problema similar, y había problemas de acceso al elemento auxiliar en el evento de inicio. Lo que terminé haciendo fue la creación de la auxiliar de atributo a una función que devuelve algo de HTML personalizado. Yo era capaz de acceder a esa HTML en el evento de inicio sin ningún tipo de problemas.

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

    OriginalEl autor ironkeith

  4. 1

    De la interfaz de usuario jQuery que pueden arrastrarse docs:

    Si quieres no sólo arrastrar, pero
    arrastrar-y-gota, ver la interfaz de usuario jQuery
    Lanzables plugin, que proporciona un
    destino para colocar draggables.

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

    OriginalEl autor karim79

  5. 1

    Sí, eso es un problema cuando usted mezcla sortables draggables droppables etc.
    Hacer ordenable contenedor como lanzables así:

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

    OriginalEl autor kami

  6. 1

    He tenido éxito usando la beforeStop evento para el que se puede ordenar.

    De aquí

    beforeStop: Este evento se desencadena cuando la clasificación se detiene, pero cuando el marcador de posición/ayudante está disponible todavía.

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

    OriginalEl autor Khawar

  7. 0

    Parece un poco chapucero – pero funcionó! Tengo que usar $(‘.dragrow1 li:last’)

    OriginalEl autor WastedSpace

  8. 0

    Puede usar un atributo de datos para almacenar el id de los elementos arrastrados. Este atributo está en los elementos que se han colocado. El código fuente de la siguiente manera:

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

    Utilizando $('dropped item").data('id') en el que se puede ordenar para obtener el identificador como:

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

    OriginalEl autor 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();
    Por favor proporcione una explicación de la solución
    Tompsett hola, yo soy el hombre que marcan esta como de baja calidad. esta es una de 2 años incompleta post abandonado por OP. Su editar hizo el post es un inválido bloque de código que contiene la rebaja de las cosas que es error de sintaxis. Por favor, no editar a menos que mejora la calidad sin empeorar las cosas.

    OriginalEl autor nomasgabo

Dejar respuesta

Please enter your comment!
Please enter your name here