example - jQuery UI Draggable/Sortable-Obtener referencia al nuevo elemento

sortable jquery ejemplos

Question

Estoy usando la demo jQuery UI Draggable / Sortable (http://jqueryui.com/demos/draggable/#sortable) para la base de mi proyecto. Necesito obtener una referencia al <li> que se clona en el ordenable cuando el ordenable lo recibe. Probé el evento de recepción de sortable, pero eso solo da una referencia al <li> arrastrable original, y no a su clon.

Answer 1

En la demo a la que hace referencia, en realidad hay un error; después de arrastrar un elemento hacia abajo, se inserta un li clonado con un id que es un duplicado de su hermano en el DOM, así que ten cuidado (se presentó un bug respecto pero no hay actividad alrededor).

Hice algunas cosas para lograr esto:

1. Para evitar la limitación de la demostración que describí anteriormente, en su lugar, aplique una class a los elementos que se pueden arrastrar y que se vincularán al sortable :

   <ul>
       <li class="new-item ui-state-highlight">Drag me down</li>
   </ul>

2. Haga que los elementos con esa clase se puedan arrastrar, en lugar de seleccionar un elemento por id :

    $(".new-item").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });

3. Aproveche el evento de stop del ordenable y realice una lógica simple sobre el elemento que se dejó caer, aprovechando el hecho de que un elemento con la clase new-item solo se pudo haber eliminado (y no es simplemente un elemento existente en el ordenable) ):

   $("#sortable").sortable({
       revert: true,
       stop: function(event, ui) {
           if (ui.item.hasClass("new-item")) {
               // This is a new item
               ui.item.removeClass("new-item");
               ui.item.html("<b>HI</b>");
           }
       }
   });

Tenga en cuenta que puede usar el atributo data-* lugar de agregar una clase auxiliar.

Aquí hay un ejemplo http://jsfiddle.net/andrewwhitaker/twFCu/ : http://jsfiddle.net/andrewwhitaker/twFCu/

Espero que ayude.

Answer 2

Si no teme acceder al estado interno de Sortable , puede hacer lo siguiente:

$(''#sortable'').sortable({
  receive: function() {
    // Sortable.currentItem refers to the item just added.
    // jQuery UI < 1.10 uses "sortable" as its data key,
    // jQuery UI >= 1.10 defines an "instance" method to get the current instance.
    var $item =
      (
        $(''#sortable'').data(''sortable'') || // jQuery UI < 1.10
        $(''#sortable'').sortable(''instance'') // jQuery UI >= 1.10
      ).currentItem;
  }
);

Fiddle: http://jsfiddle.net/t33bt/12/

Sin embargo, tenga en cuenta que esto podría no funcionar en una futura versión de jQuery UI porque no usa la API oficial . Pero, sin embargo, funciona incluso en jQuery UI 1.11 (versión actual en el momento de esta publicación).

Answer 3

Y si desea otra forma muy aproximada de obtener ese elemento solo para eliminarlo o algo así, simplemente haga referencia en la lista desplegable como

var _clone = $(".ui-draggable-dragging");

Por supuesto, esa clase se elimina justo DESPUÉS de la caída, de modo que la referencia se pierde y no puede hacer nada que no sea inmediato.

La respuesta anterior es más robusta, pero si estás en un apuro loco ...