43 votos

la agrupación que se pueden arrastrar objetos con jquery-ui draggable

Quiero usar jquery que pueden arrastrarse/drop para permitir al usuario seleccionar un grupo de objetos (cada uno tiene una casilla de verificación en la esquina) y, a continuación, arrastre la selección de objetos como un grupo de...

No puedo entender por la vida de mí cómo hacerlo jaja.

Aquí es lo que estoy pensando conducirá a una solución que se puede usar, en cada uno de los que se pueden arrastrar objeto, utilice el botón start() del evento y de alguna manera agarrar todos los otros objetos seleccionados y agregarlos a la selección

Yo también estaba pensando en hacer el objeto arrastrado ver como un grupo de objetos (imágenes, así que un montón de fotos tal vez) por razones de rendimiento. Creo que con la posibilidad de arrastrar la funcionalidad podría caerse si arrastra varias docenas de objetos a la vez, hace que suene como una idea mejor?

65voto

brianpeiris Puntos 7693

Usted podría utilizar la posibilidad de arrastrar la helper opción para arrastrar los grupos de elementos.

Por ejemplo, si su draggables han casillas de verificación, usted puede devolver los elementos seleccionados de la función auxiliar así:

$('#dragSource li').draggable({
  helper: function(){
    var selected = $('#dragSource input:checked').parents('li');
    if (selected.length === 0) {
      selected = $(this);
    }
    var container = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone());
    return container; 
  }
});

Demo

He instalación de una demo con la posibilidad de arrastrar imágenes con las casillas de verificación y un poco de líquido de diseño:

http://jsbin.com/awagi

Nota: sólo he probado en Firefox; sospecho que IE no como algunos de los CSS.

1voto

Paul Puntos 3828

Rendimiento De La Idea:

Hacer un invisible objeto de grupo'. Cuando los artículos son revisados, los hacen los niños del grupo objeto, cuando no se activa, establecer de nuevo como hijos de el cuerpo del documento, o estática de los padres o lo que sea. Vas a tener que traducir los objetos de posición para asegurarse de que no saltan, también de conectar/desconectar el ratón controladores de eventos para los niños del grupo de agregar/quitar.

Cuando usted consigue un ratón arriba/abajo evento en cualquiera de los niños, lo que te vas a mover en realidad es que el objeto de grupo.

Esto debería hacer que sea más sencillo.

1voto

Allen Bargi Puntos 4440

Esto exactamente lo que estoy tratando de hacer. Hasta ahora no he tenido éxito, pero he encontrado que este tipo hecho en una muy complicada. usted puede comprobar fuera tal vez usted podría hacer algo con eso.

Esta debería ser una característica en la que se pueden arrastrar. Espero que implementar lo más pronto que tarde

1voto

kvnn Puntos 113

Lo que he hecho para esto se crea una función que le dan el esclavo / maestro de los elementos, lo que crea un bind() función para el maestro (yo soy sólo permitir el arrastre de la maestra en este caso, se puede trabajar alrededor de esto, estoy seguro), lo que hace que el esclavo siga en torno al uso del estándar css jQuery.

    function overlap(slave,master) {
        $('a#groupTheseBlocks').click(function(){
            master.bind('drag', groupBlocks);
            slave.draggable('disable');

            // remember where the slave is in relation to the master
            sLeftRef = (slave.offset().left - master.offset().left);
            sTopRef = (slave.offset().top - master.offset().top);
        });


        function groupBlocks() {
            var left = master.offset().left;
            var top = master.offset().top;

            slave.draggable('disable');
            slave.css('left', (left + sLeftRef) + 'px');
            slave.css('top', (top + sTopRef) + 'px');

        } 
    }

Supongo que voy a publicar más a esto de una vez tengo un ejemplo de trabajo. Como destaca este es trabajo para mí. Lo que falta es una forma de llamar la superposición(slave, master) con los elementos que desea agrupar. Estoy haciendo esto en una manera específica. Puedes inteligente una manera de hacerlo, estoy seguro.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X