Estoy utilizando la interfaz de usuario jQuery que pueden Arrastrarse/Ordenable demo (http://jqueryui.com/demos/draggable/#sortable) para la base de mi proyecto. Necesito obtener una referencia a la <li> que obtiene clonado en el que se puede ordenar cuando el ordenable recibe. He probado el que se puede ordenar de recepción del evento, sino que sólo da una referencia a la original que se pueden arrastrar <li>, y no a su clon.

te refieres al ayudante?
sí, yo estoy usando el clon ayudante…tratando de obtener una referencia a la recién clonado <li>
tenía este problema exacto

OriginalEl autor Mark Richman | 2011-02-11

3 Comentarios

  1. 30

    De la demostración que se hace referencia, en realidad hay un error; después de arrastrar un elemento de abajo se inserta un clonado li con un id que es un duplicado de su hermano en el DOM, así que ten cuidado (un error fue presentada acerca de esto, pero no hay actividad alrededor de ella).

    Hice un par de cosas para lograr esto:

    1. A las limitaciones de la demo que he descrito anteriormente, en lugar de aplicar un class a la que se pueden arrastrar los elementos que estarán vinculados a la sortable:

      <ul>
          <li class="new-item ui-state-highlight">Drag me down</li>
      </ul>
    2. Hacer que los elementos con que clase de arrastrarse, en lugar de seleccionar un elemento por id:

       $(".new-item").draggable({
           connectToSortable: "#sortable",
           helper: "clone",
           revert: "invalid"
       });
    3. Toque en el dejar evento de la que se puede ordenar y realizar algunas simples de la lógica sobre el elemento que se ha caído, aprovechando el hecho de que un elemento con la clase new-item sólo podría haber sido abandonado (y no es simplemente un elemento existente en la 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 usted podría utilizar el data-* atributo en lugar de agregar una clase auxiliar.

    He aquí un ejemplo de trabajo: http://jsfiddle.net/andrewwhitaker/twFCu/

    Espero que ayude.

    PERFECTO!!! Muchas gracias!
    Gracias por eso, yo estaba teniendo un poco de problemas con esta situación.
    Yo estaba tratando todo con la parada .se pueden arrastrar y llegar a ningún lado – me salvó un montón de tiempo, gracias
    Encantados de ayudarle!

    OriginalEl autor Andrew Whitaker

  2. 1

    Y si quieres otra muy áspero y listo manera de conseguir que el objeto de eliminar o algo, solo hay que hacer referencia a ella en la caída de los

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

    Por supuesto que la clase se retira justo DESPUÉS de la caída, de modo que la referencia se pierde y no se puede hacer nada que no es inmediata.

    La respuesta de arriba es más robusto, pero si estás en un loco rush…

    OriginalEl autor Dan

  3. 1

    Si no miedo acceso a la Sortable‘s estado interno, 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;
      }
    );

    Violín: http://jsfiddle.net/t33bt/12/

    Tenga en cuenta, sin embargo, que esto no podría trabajar en un futuro jQuery UI versión más porque no utilizar la API oficial. Pero, no obstante, funciona incluso en jQuery UI 1.11 (versión actual en el momento de escribir esto).

    OriginalEl autor flu

Dejar respuesta

Please enter your comment!
Please enter your name here