Tengo lugar mi muestra en la siguiente ubicación : http://jsbin.com/axegem/1

Aquí está el escenario. Cuando arrastro los divs y colocarlos en otro lugar, necesito recuperar el nuevo orden de los divs. Por ejemplo, supongamos que (con respecto a mi de la muestra), me arrastran y sueltan DIV 3 después de DIV 6. Ahora estoy tratando de conseguir el nuevo orden de los divs. Para las pruebas, estoy alertando a su texto html en el código siguiente:

$(".draggable").each(function(){
  alert($(this).html());
});

Estoy esperando la alerta fin de ser: DIV 1, DIV 2, DIV 4, DIV 5, DIVISIÓN 6, DIV 3, DIV 7, DIV 8, DIV 9. Pero, ¿qué puedo obtener de la muestra es de DIV 1, DIV 2, DIV 3, DIV 4, DIV 5, DIVISIÓN 6, DIV 7, DIV 8, DIV 9.

¿Cómo puedo obtener el nuevo orden de los divs después de caer en una nueva ubicación?

  • Usted sólo mover la posición de la div, no cambiar el orden. Recomiendo el uso de .sortable(), ya que ya están usando jQuery. jqueryui.com/sortable/#connect-lists
  • Nota: por favor, utilice console.log() en lugar de alert(). Ver 30 de las alertas me dan ganas de dar un puñetazo a alguien en la cara. stackoverflow.com/questions/4743730/…
  • Sólo estoy usando esto para las pruebas. Voy a utilizar tu sugerencia. Gracias por ello.
InformationsquelleAutor PushCode | 2013-02-01

2 Comentarios

  1. 5

    He de cambiar un poco el código para que se ajuste a sus necesidades.

    He de usar Ordenar funcionalidad, es porque se ha utilizado el draggable la única droga no ordenar elementos.

    Cuando se utiliza el Ordenable será fácil conseguir los elementos ordenados

    $(document).ready(function() {
        $('#divOuter2').css("margin","-540px 0 0 400px");
        $('#divOuter3').css("margin","-540px 0 0 800px");
    
        $(".droppable").sortable({
          update: function( event, ui ) {
            Dropped();
          }
        });
    
    
    
      });
    
    
    
        function Dropped(event, ui){
          $(".draggable").each(function(){
            //var p = $(this).position();
            alert($(this).html());
          });
          refresh();
        }

    He puesto el DOM elemento con clase .droppable como ordenable.

    A continuación, en Actualización Caso de que yo estoy llamando a la función Dropped

    Ver Ejemplo

    • Gracias por los aportes chicos. Tengo que cambiar toda mi lógica de la posibilidad de arrastrar/drop uso de ordenar. Tengo la solución mucho más rápido aquí que en el blog de msdn.
    • Yo soy poco confundido aquí mientras estoy trabajando en este problema. Mi Caído() de la función es llamada dos veces aquí: jsbin.com/axegem/15
    • He mirado el código y no veo donde es llamada dos veces. Me estoy perdiendo algo?
    • He intentado tanto en IE y firefox. Cuando yo arrastrar y colocar un DIV, puedo ver «Perdidos» alerta de dos veces.
    • He notado un comportamiento extraño. Al colocar Div 3 en Div 6, vea el «Caído» alerta de dos veces. Si la gota de Div 5 en Div 6, se ve sólo una vez. ¿Por qué es eso así?
    • tengo algunos de los elementos en cada div, y uno de ellos es un elemento span que contienen el «movimiento» de la imagen, así de esta manera quiero arrastrar a la función sólo dentro de envergadura, y no en cualquier lugar en el div del cuerpo. ¿cómo puedo solucionar esto ? gracias
    • mira este enlace api.jqueryui.com/sortable/#option-handle usted puede utilizar manejar para lograr que

  2. 3

    El problema acerca de la posibilidad de arrastrar es que todo lo que hace es mover los elementos en un espacio libre y no se preocupa de hacer el pedido. Lanzables puede ayudar, pero el que más preocupa en averiguar si un objeto está dentro de un contenedor.

    Lugar de utilizar la posibilidad de arrastrar y lanzables, intente ordenable. Hace cosas como establecer el orden de los elementos increíblemente simple. Que usted ya no tiene que preocuparse de montaje en el orden correcto tampoco.

    Echa un vistazo a este: http://jsbin.com/axegem/6/

Dejar respuesta

Please enter your comment!
Please enter your name here