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

Je veux être en mesure de faire glisser un groupe d'éléments avec jQuery, comme si je l'ai sélectionné et déplacé plusieurs icônes sur le bureau de Windows.

J'ai trouvé la démo de threedubmedia de jQuery.de l'événement.faites glisser:

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

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

Je pense que ce plugin est génial. Est-ce une bonne et populaire de la bibliothèque? Connaissez-vous des sites web ou des applications qui l'utilisent?

Il d'autres bibliothèques ou des plugins pour faire glisser plusieurs objets?

Peut jQuery UI faites glisser plusieurs objets?

Qu'entendez-vous par le glissement de plusieurs objets? Vous pouvez lier jQuery UI est déplaçable à de multiples éléments, mais pour faire tous/certains d'entre eux de se déplacer à la fois, vous aurez à mettre en œuvre votre logique sur le dessus de cela.
Oui, je veux faire tous/certains objets se déplacent à la fois.
Comment puis-je le faire avec jQuery UI?
Prendre un coup d'oeil dans la documentation, dans les événements, il y aura de début de l'événement. Essayez d'ajouter .ui-déplaçable glisser de classe pour les autres éléments que vous essayez de déplacer. J'ai peut-être tort, mais je pense que l'INTERFACE utilisateur utilise cette classe pour déplacer l'élément, afin qu'ils se déplacent ensemble.
Voir stackoverflow.com/questions/793559/... pour la solution que vous cherchez.

InformationsquelleAutor js_ | 2011-04-15

-19

il est Déplaçable dans le jquery UI

tout ce que vous avez à faire est de:
```
$(selector).draggable(); //and you are done!
```
voir exemple ici: http://jsfiddle.net/maniator/zVZFq/

Si vous voulez vraiment multidragging vous pouvez essayer d'utiliser certains événements click pour contenir les blocs en place
```
$('.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
})*/
}
})
```
Voir exemple ici: http://jsfiddle.net/maniator/zVZFq/5
- Merci pour votre réponse. Mais je pense que draggable() fait l'objet unique glisser possible, pas d'objet multiple-glisser. threedubmedia.com/code/event/drag/demo/multi c'est une démo de multiples objets de glisser. 1. Tout d'abord, cliquez sur certains objets. 2. Puis la couleur des objets ont changé. 3. Et si vous faites glisser l'objet qui a cliqué avant, tout cliqué sur le mouvement des objets.
- vous pouvez utiliser plusieurs sélecteurs et ils seront tous devenus déplaçable. mal faire un violon, d'une minute
- j'ai fait du violon et l'ont attaché à ma réponse.
- Je vous remercie très beaucoup pour la fabrication d'un violon. Mais ce que je veux faire est de glisser plus de deux objets par un simple glisser. Dans votre violon, je ne peux glisser un objet par un simple glisser.
- j'ai mis à jour le violon ici: jsfiddle.net/maniator/zVZFq/5 son pas parfait mais im sûr que vous pouvez résoudre le problème ^_^
- il ne fonctionne pas parfaitement, mais c'est le mieux que je puisse faire dans le peu de temps que j'avais, ur les bienvenus :-). Sur la pile, vous devez choisir la meilleure réponse que accepted de cette manière sur les questions d'avenir, les gens seraient plus enclins à vous aider ^_^
- Aussi loin que je peux dire, il n'y a pas moyen de faire glisser plusieurs éléments. C'est, du moins pas aussi simple que d'appeler draggable(). J'ai trouvé ce plugin a été quasiment parfait: comp345.awardspace.com/multidraggable/base.html
- J'ai mis à jour Neals le violon et il fonctionne parfaitement sans le multidraggable plugin: jsfiddle.net/zVZFq/358
- vous devez mettre à jour la réponse à la solution dans votre deuxième violon jsfiddle.net/maniator/zVZFq/5 car c'est une question populaire et de la accepté de répondre ne fonctionne pas comme à la question posée et a un score négatif.
- Fait @Lonergan6275 🙂
InformationsquelleAutor Naftali aka Neal

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

merci de me montre comment plusieurs glisser avec jQuery UI. cela fonctionne aussi.
Ce violon est intégré à votre solution avec quelques petites mises à jour: jsfiddle.net/zVZFq/358
Saviez-vous que lorsque vous vous déplacez d'un groupe à partir d'Un puis vous vous déplacez à partir de B (par exemple) les divs de changer leur position?
l'exemple le violon ne fonctionne pas si elle est utilisée avec helper:'clone' option, des idées?

InformationsquelleAutor ChrisThompson

8

Je suis l'auteur de la de la threedubmedia plugins. J'ai ajouté cette fonctionnalité pour la prise en charge de plusieurs éléments, parce que je ne pouvais pas trouver une solution satisfaisante n'importe où ailleurs.

Si vous avez besoin d'une solution qui fonctionne avec jQuery UI, voici un plugin qui ajoute un peu de la multi-fonctionnalité 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
- merci pour l'introduction de votre plugin. puis-je regrouper les éléments par un simple clic(pas par un ctrl-clic)? puis-je personnaliser l'effet lorsque les éléments sont-ils regroupés? votre démo change de couleur d'un élément lorsqu'il est groupé. mais je veux déplacer la position d'un objet de quelques pixels quand il est groupé. et puis-je l'extrémité de la poignée de l'événement glisser avec votre plugin?
- Désolé si je n'étais pas tout à fait clair. Je suis l'auteur de la threedubmedia plugins. J'ai été tout simplement de poster le lien comme un exemple de création d'une fonctionnalité similaire avec jQuery UI.
- désolé pour mon incompréhension. im très heureux et surpris d'avoir une réponse de l'auteur de l'threedubmedia plugins! im en utilisant votre jquery.de l'événement.faites glisser pour mon logiciel gi qui développe actuellement. j'aime votre plugin. c'est vraiment simple et puissant comme vous le dites.
InformationsquelleAutor 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);
})
}

Grâce à ChrisThompson et le vert pour la quasi-parfait.

InformationsquelleAutor Riccardo Di Stefano

1

Je voulais ajouter (ce à venir élevé dans google), car aucun des plugins dans ce fil de discussion a travaillé et il n'est pas de la nativité pris en charge par jquery ui, une simple solution élégante.

Enveloppez-la glisser des éléments dans un conteneur et à utiliser un événement pour faire glisser tout à la fois, cela permet pour les célibataires draggables et multidraggables (mais pas vraiment sélectif draggables).
```
jQuery(document).click(function(e) {
if(e.shiftKey) {
jQuery('#parent-container').draggable();
}
}); 
```
- Cette solution est évident, mais pas toujours possible, surtout lorsque les éléments que vous souhaitez faire glisser à la fois sont situés dans différents conteneurs et cet ordre ne peut pas être changé.
InformationsquelleAutor Wyck
1

Check this out:

https://github.com/someshwara/MultiDraggable

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

Traîne le groupe des éléments de l'ensemble. Le groupe peut aussi être un tableau spécifiant les éléments individuels.

Comme:$("#drag1").multiDraggable({ group: [$("#drag1"),$("#drag2") ]});
- Est-ce de travailler avec des éléments qui ont été créés dynamiquement après l'appel à multiDraggable?
- Oui. Ce plugin fonctionne sur les éléments créés dynamiquement jQuery live est utilisé pour atteindre cet objectif.
- jQuery .live() a été supprimé dans la version 1.9 partir.
InformationsquelleAutor Sudheer Someshwara
0

Mettre vos articles en quelques récipient, ce conteneur déplaçable. Vous aurez besoin de mettre handle option à une classe de votre élément de l'élément. Aussi, vous aurez besoin de recalculer les éléments de position après le glissement. Et évidemment, quand vous décochez les éléments que vous devez les prendre à partir de ce conteneur et les remettre à leur origine.
- de cette façon, vous ne serez pas en mesure de sélectionner les éléments à l'intérieur de ce conteneur.
- c'est une bonne solution mais a besoin d'un calcul sur les placer à l'intérieur du contenant et après avoir communiqué avec CTRL obtenir détruire le conteneur parent et ajouter des éléments dos +1
InformationsquelleAutor Ev_genus

C'est ce que j'ai utilisé, a Fonctionné 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 });   
}
});

};

InformationsquelleAutor Sjoerd de Wit

Vous devez vous connecter pour publier un commentaire.