web-dev-qa-db-fra.com

Comment faire glisser plusieurs éléments à la fois avec JavaScript ou jQuery?

Je veux pouvoir faire glisser un groupe d'éléments avec jQuery, comme si j'avais sélectionné et glissé plusieurs icônes sur le bureau Windows.

J'ai trouvé la démo de jQuery.event.drag de - threedubmedia :

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

Je pense que ce plugin est génial. Cette bibliothèque est-elle bonne et populaire? Connaissez-vous des sites Web ou des applications qui l'utilisent?

Existe-t-il d'autres bibliothèques ou plugins pour faire glisser plusieurs objets?

Est-ce que jQuery UI peut faire glisser plusieurs objets?

javascriptjqueryjquery-uijquery-pluginsdrag-and-drop
23
js_
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);
    })
}
9
ChrisThompson

Je suis l'auteur des plugins threedubmedia. J'ai ajouté cette fonctionnalité pour prendre en charge plusieurs éléments, car je ne pouvais pas trouver de solution satisfaisante ailleurs.

Si vous avez besoin d'une solution qui fonctionne avec l'interface utilisateur jQuery, voici un plugin qui ajoute des fonctionnalités de multi-glisser, bien que les démos ne semblent pas fonctionner correctement dans Firefox pour Mac.

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

8
mike.helgeson

Cela a fonctionné pour moi.

Violon ici:

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);
})
}

Merci à ChrisThompson et green pour la solution presque parfaite.

3
Riccardo Di Stefano

Regarde ça:

https://github.com/someshwara/MultiDraggable

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

Fait glisser le groupe d'éléments ensemble. Le groupe peut également être un tableau spécifiant des éléments individuels.

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

1
Sudheer Someshwara

Je voulais ajouter (cela arrive haut dans google), car aucun des plugins de ce fil n'a fonctionné et ce n'est pas la nativité prise en charge par jquery ui, une solution simple et élégante.

Enveloppez les éléments déplaçables dans un conteneur et utilisez un événement pour les faire glisser tous en même temps, cela permet de déplacer les draggables simples et multidragables (mais pas les draggables vraiment sélectifs).

jQuery(document).click(function(e) {

  if(e.shiftKey) {
      jQuery('#parent-container').draggable();
  }
});
1
Wyck

C'est ce que j'ai utilisé, travaillé dans mon cas.

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 });   
  }
});

};

0
Sjoerd de Wit

Mettez vos articles dans un conteneur et faites-le glisser. Vous devrez définir l'option handle pour être une classe de votre élément item. Vous devrez également recalculer la position des éléments après le glisser. Et évidemment, lorsque vous désélectionnez des éléments, vous devez les retirer de ce conteneur et les remettre dans leur origine.

0
Ev_genus