如何使用JavaScript或jQuery一次拖动多个元素？

I want to be able to drag a group of elements with jQuery, like if I selected and dragged multiple icons on the Windows desktop.

我希望能够使用jQuery拖动一组元素，就像我在Windows桌面上选择并拖动多个图标一样。

I found the demo of threedubmedia's jQuery.event.drag:

我找到了threedubmedia的jQuery.event.drag的演示：

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

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

I think this plugin is great. Is this good and popular library? Do you know websites or applications which use it?

我认为这个插件很棒。这个好受欢迎的图书馆吗？您知道使用它的网站或应用程序吗？

Are there any other libraries or plugins to drag multiple objects?

是否还有其他库或插件来拖动多个对象？

Can jQuery UI drag multiple objects?

jQuery UI可以拖动多个对象吗？

8 个解决方案

#1

-20

there is Draggable in the jquery UI

在jquery UI中有Draggable

all you would have to do is:

你所要做的就是：

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

see example here: http://jsfiddle.net/maniator/zVZFq/

看这里的例子：http：//jsfiddle.net/maniator/zVZFq/

#2

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

#3

I am the author of the jquery drag/drop events plugin. I added this functionality for supporting multiple elements, because I could not find a satisfactory solution anywhere else.

我是jquery拖放事件插件的作者。我添加了此功能以支持多个元素，因为我无法在其他任何地方找到满意的解决方案。

If you need a solution that works with the jQuery UI, here is a plugin which adds some multi-drag functionality, though the demos don't seem to work correctly in firefox 4 mac.

如果您需要一个适用于jQuery UI的解决方案，这里有一个插件，它添加了一些多拖动功能，虽然演示似乎在firefox 4 mac中无法正常工作。

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

#4

This worked for me.

这对我有用。

Fiddle here:

小提琴：

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

Thanks to ChrisThompson and green for the almost-perfect solution.

感谢ChrisThompson和绿色几乎完美的解决方案。

#5

I wanted to add (this coming up high in google), since none of the plugins in this thread worked and it is not nativity supported by jquery ui, a simple elegant solution.

我想添加（这在谷歌中很高），因为这个线程中的所有插件都没有工作，并且它不是jquery ui支持的诞生，这是一个简单优雅的解决方案。

Wrap the draggable elements in a container and use an event to drag them all at once, this allows for singles draggables and multidraggables (but not really selective draggables).

将可拖动元素包装在容器中并使用事件一次拖动它们，这允许单个可拖动和多重可拖动（但不是真正的选择性拖动）。

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

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

#6

Check this out:

看一下这个：

https://github.com/someshwara/MultiDraggable

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

用法：$（“。className”）。multiDraggable（{group：$（“。className”）}）;

Drags the group of elements together. Group can also be an array specifying individual elements.

将元素组拖放在一起。组也可以是指定单个元素的数组。

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

例如：$（“＃drag1”）。multiDraggable（{group：[$（“＃drag1”），$（“＃drag2”）]}）;

#7

Put your items into some container and make this container draggable. You will need to set handle option to be a class of your item element. Also you will need to recalculate items position after drag. And obviously when you deselect items you have to take them from this container and put back to their origin.

将您的物品放入某个容器中，使该容器可以拖动。您需要将handle选项设置为item元素的类。您还需要在拖动后重新计算项目位置。显然，当你取消选择物品时，你必须从这个容器中拿走它们并放回原点。

#8

This is what i used, Worked in my case.

这是我用过的，在我的案例中工作。

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

};

#1

-20