Quiero ser capaz de arrastrar a un grupo de elementos con jQuery, como si me seleccionado y la arrastró varios iconos en el escritorio de Windows.

He encontrado la demo de threedubmedia de jQuery.evento.arrastre:

http://threedubmedia.com/code/event/drag/demo/multi

http://threedubmedia.com/code/event/drag#demos

Creo que este plugin es muy bueno. Es esta buena y biblioteca popular? ¿Sabes de sitios web o aplicaciones que lo utilizan?

Hay otras bibliotecas o plugins para arrastrar varios objetos?

Puede jQuery UI arrastrar varios objetos?

  • ¿A qué te refieres arrastrando varios objetos? Puede enlazar jQuery interfaz de usuario de la posibilidad de arrastrar a varios elementos, pero para hacer todas/algunas de ellas se mueven a la vez, usted tendrá que aplicar la lógica en la parte superior de la misma.
  • Sí, quiero hacer todos/algunos objetos se mueven a la vez.
  • ¿Cómo puedo hacer esto con jQuery UI?
  • Echa un vistazo en la documentación, en los eventos que habrá evento de inicio. Trate de añadir .la interfaz de usuario que se pueden arrastrar arrastre de clase para el resto de los elementos que va a mover. Puedo estar equivocado, pero creo que la interfaz de usuario utiliza esta clase para mover el elemento, por lo que se moverán juntos.
  • Consulte stackoverflow.com/questions/793559/… para la solución que estás buscando.
InformationsquelleAutor js_ | 2011-04-15

8 Comentarios

  1. -19

    hay Se pueden arrastrar en la interfaz de usuario jquery

    todo lo que tendría que hacer es:

    $(selector).draggable(); //and you are done!

    ver ejemplo aquí: http://jsfiddle.net/maniator/zVZFq/


    Si usted realmente desea multidragging puede intentar usar algunos de los eventos para celebrar los bloques en su lugar

    $('.drag').draggable();
    $('.drag').click(function(){
    console.log(this, 'clicked')
    var data = $(this).data('clicked');
    var all = $('.all');
    if(data == undefined || data == false){
    $(this).data('clicked', true);
    this.style.background = 'red';
    $(this).draggable('disable');
    if(all.children().length <= 0){
    all.draggable().css({
    top: '0px',
    left: '0px',
    width: $(window).width(),
    height: $(window).height(),
    'z-index': 1
    });
    }
    var top = parseInt(all.css('top').replace('px','')) +
    parseInt($(this).css('top').replace('px',''))
    var left = parseInt(all.css('left').replace('px','')) +
    parseInt($(this).css('left').replace('px',''))
    $(this).css({
    top: top,
    left: left
    })
    $('.all').append($(this));
    }
    else {
    $(this).data('clicked', false);
    this.style.background = 'grey';
    $(this).draggable('enable');
    $('body').append($(this));
    if(all.children() <= 0){
    all.draggable('destroy');
    }
    /*
    var top = parseInt(all.css('top').replace('px','')) -
    parseInt($(this).css('top').replace('px',''))
    var left = parseInt(all.css('left').replace('px','')) -
    parseInt($(this).css('left').replace('px',''))
    $(this).css({
    top: top,
    left: left
    })*/
    }
    })

    Ver ejemplo aquí: http://jsfiddle.net/maniator/zVZFq/5

    • Gracias por tu respuesta. Pero creo que se pueden arrastrar() hace de objeto único-arrastre posible, no de varios objetos y arrastre. threedubmedia.com/code/event/drag/demo/multi es una demostración de varios objetos y arrastre. 1. En primer lugar, haga clic en algunos de los objetos. 2. A continuación, el color de los objetos cambiado. 3. Y si arrastra el objeto que hace clic antes, todo hizo clic en los objetos se mueven.
    • puede utilizar varios selectores y todos ellos se convierten en la posibilidad de arrastrar. mal hacer un violín, un minuto
    • he hecho un violín y unido a mi respuesta.
    • Muchas gracias por hacer de un violín. Pero lo que quiero hacer es arrastrar más de dos objetos por un solo arrastre. En su violín, yo sólo puede arrastrar un objeto a través de un solo arrastre.
    • ahhhh ok, el trabajo de uno es
    • he actualizado el violín aquí: jsfiddle.net/maniator/zVZFq/5 no es perfecto, pero estoy seguro de que usted puede arreglar ^_^
    • muchas gracias. genial!!! es lo que quiero hacer.
    • no funciona a la perfección, pero que es lo mejor que puedo hacer en el poco tiempo que he tenido, ur de bienvenida :-). En la pila debe elegir la mejor respuesta como accepted de esa manera sobre el futuro de las preguntas que la gente sería más probable para ayudarte ^_^
    • Como lo que yo puedo decir, que no hay manera de arrastrar varios elementos. Es, al menos, no es tan simple como llamar a draggable(). Encontré este plugin fue casi perfecto: comp345.awardspace.com/multidraggable/base.html
    • He actualizado Neals del violín y funciona perfecto sin el multidraggable plugin: jsfiddle.net/zVZFq/358
    • usted debe actualizar la respuesta a la solución en su segundo violín (jsfiddle.net/maniator/zVZFq/5), ya que esta es una pregunta muy común y aceptada respuesta no funciona como la pregunta y tiene una puntuación negativa.
    • Hecho @Lonergan6275 🙂

  2. 8
    var selectedObjs;
    var draggableOptions = {
    start: function(event, ui) {
    //get all selected...
    selectedObjs = $('div.selected').filter('[id!='+$(this).attr('id')+']');
    },
    drag: function(event, ui) {
    var currentLoc = $(this).position();
    var orig = ui.originalPosition;
    var offsetLeft = currentLoc.left-orig.left;
    var offsetTop = currentLoc.top-orig.top;
    moveSelected(offsetLeft, offsetTop);
    }       
    };
    $(document).ready(function() {
    $('#dragOne, #dragTwo').draggable(draggableOptions);
    });
    function moveSelected(ol, ot){
    console.log(selectedObjs.length);
    selectedObjs.each(function(){
    $this =$(this);
    var pos = $this.position();
    var l = $this.context.clientLeft;
    var t = $this.context.clientTop;
    $this.css('left', l+ol);
    $this.css('top', t+ot);
    })
    }
    • ese código es repetitivo sin razón
    • gracias por enseñarme a múltiples arrastre con jQuery UI. esto también funciona.
    • Este violín es construido a su solución, con algunas pequeñas actualizaciones: jsfiddle.net/zVZFq/358
    • ¿Sabía usted que cuando se mueve un grupo de una y, a continuación, se mueve de B (por ejemplo) de los divs cambia su posición?
    • el ejemplo de violín no funciona si se utiliza con helper:'clone' opción, alguna idea?
  3. 8

    Yo soy el autor de la de la threedubmedia plugins. He añadido esta funcionalidad para el soporte de múltiples elementos, porque no podía encontrar una solución satisfactoria en cualquier otro lugar.

    Si usted necesita una solución que funciona con jQuery UI, aquí es un plugin que añade algo de multi-funcionalidad de arrastrar, a pesar de que el demos no parecen funcionar correctamente en Firefox para Mac.

    http://www.myphpetc.com/2009/11/jquery-ui-multiple-draggable-plugin.html

    • gracias por la introducción de tu plugin. puedo agrupar los elementos por sólo un clic(no por un ctrl-clic)? puedo personalizar efecto cuando los artículos están agrupados? su demostración de los cambios de color de un elemento cuando se agrupan. pero me quiero mover de la posición de un objeto, en algunos píxeles cuando se agrupan. y puedo extremo de la manija de arrastre evento con el plugin?
    • Lo siento si no fui del todo claro. Yo soy el autor de la threedubmedia plugins. Yo estaba simplemente por publicar el enlace otra como un ejemplo de la creación de una funcionalidad similar con jQuery UI.
    • lo siento por mi falta de comprensión. estoy muy contento y sorprendido a obtener una respuesta del autor de la threedubmedia plugins! estoy usando tu jquery.evento.arrastre para mi el software que im desarrollar ahora. me gusta tu plugin. es realmente sencilla y potente como usted dice.
  4. 2

    Esto funcionó para mí.

    El violín aquí:

    var selectedObjs;
    var draggableOptions = {
    start: function(event, ui) {
    //get all selected...
    if (ui.helper.hasClass('selected')) selectedObjs = $('div.selected');
    else {
    selectedObjs = $(ui.helper);
    $('div.selected').removeClass('selected')
    }
    },
    drag: function(event, ui) {
    var currentLoc = $(this).position();
    var prevLoc = $(this).data('prevLoc');
    if (!prevLoc) {
    prevLoc = ui.originalPosition;
    }
    var offsetLeft = currentLoc.left-prevLoc.left;
    var offsetTop = currentLoc.top-prevLoc.top;
    moveSelected(offsetLeft, offsetTop);
    selectedObjs.each(function () {
    $(this).removeData('prevLoc');
    });
    $(this).data('prevLoc', currentLoc);
    }
    };
    $('.drag').draggable(draggableOptions).click(function()     {$(this).toggleClass('selected')});
    function moveSelected(ol, ot){
    console.log("moving to: " + ol + ":" + ot);
    selectedObjs.each(function(){
    $this =$(this);
    var p = $this.position();
    var l = p.left;
    var t = p.top;
    console.log({id: $this.attr('id'), l: l, t: t});
    $this.css('left', l+ol);
    $this.css('top', t+ot);
    })
    }

    Gracias a ChrisThompson y el verde para la casi-la solución perfecta.

  5. 1

    Quería añadir (esta de alta en google), ya que ninguno de los plugins en este hilo trabajado y no es la natividad apoyado por jquery ui, una simple solución elegante.

    Envoltura de la que se pueden arrastrar los elementos en un recipiente y utilizar un evento para arrastrar a todos a la vez, esto permite que para los solteros draggables y multidraggables (pero no realmente selectiva draggables).

    jQuery(document).click(function(e) {
    if(e.shiftKey) {
    jQuery('#parent-container').draggable();
    }
    }); 
    • Esta solución es obvia, pero no siempre es posible, especialmente cuando los elementos que desea arrastrar a la vez se encuentran en diferentes contenedores y este orden no puede ser cambiado.
  6. 1

    Mira esto:

    https://github.com/someshwara/MultiDraggable

    Uso:$(".className").multiDraggable({ group: $(".className")});

    Arrastra el grupo de elementos. El grupo también puede ser una matriz de especificación de los elementos individuales.

    Como:$("#drag1").multiDraggable({ group: [$("#drag1"),$("#drag2") ]});

    • Hace este trabajo con elementos que fueron creados dinámicamente después de la llamada a multiDraggable?
    • Sí. Este plugin funciona en elementos creados dinámicamente jQuery live se utiliza para lograr esto.
    • jQuery .live() ha sido eliminado en la versión 1.9 en adelante.
  7. 0

    Poner tus cosas en algún recipiente y hacer de este contenedor se pueden arrastrar. Usted tendrá que configurar handle opción a ser una clase de su elemento elemento. También será necesario volver a calcular los elementos de la posición después de arrastre. Y obviamente, cuando se anula la selección de los elementos que tienen que tomar ellos de ese recipiente y poner de nuevo a su origen.

    • de esta manera usted no será capaz de seleccionar elementos individuales dentro de ese contenedor.
    • esta es una buena solución, pero necesita un poco de cálculo en colocar dentro del recipiente y después de realease con CTRL consigue destruir el contenedor principal y añadir elementos de espalda +1
  8. 0

    Esto es lo que he usado, Funcionó en mi caso.

    function selectable(){
    $('#selectable').selectable({
    stop: function() {
    $('.ui-selectee', this).each(function(){
    if ($('.ui-selectee').parent().is( 'div' ) ) {
    $('.ui-selectee li').unwrap('<div />');
    }
    });
    $('.ui-selected').wrapAll('<div class=\"draggable\" />');
    $('.draggable').draggable({ revert : true });   
    }
    });

    };

Dejar respuesta

Please enter your comment!
Please enter your name here