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

Question

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

我找到了threedubmedia的jQuery.event.drag的demo：

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

我觉得这个插件很棒。这是一个好的和受欢迎的图书馆吗？你知道使用它的网站或应用程序吗？

是否有任何其他库或插件可以拖动多个对象？

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

Answer 1

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

Answer 2

我是threedubmedia 插件的作者。我添加了这个功能来支持多个元素，因为我在其他任何地方都找不到令人满意的解决方案。

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

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

Answer 3

这对我有用。

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

感谢 ChrisThompson 和 green 提供了几乎完美的解决方案。

Answer 4

我想补充一下（这在 google 中排名很高），因为这个线程中的插件都没有工作，而且 jquery ui 不支持原生，这是一个简单优雅的解决方案。

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

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

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

Answer 5

看看这个：

https://github.com/someshwara/MultiDraggable

用法：$(".className").multiDraggable({ group: $(".className")});

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

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

Answer 6

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

Answer 7

这是我使用的，在我的情况下工作。

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

};

Answer 8

jquery UI 中有Draggable

您所要做的就是：

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

在此处查看示例：http://jsfiddle.net/maniator/zVZFq/

---

如果你真的想要多重拖动，你可以尝试使用一些点击事件来将块固定在适当的位置

$('.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
        })*/
    }
})

在此处查看示例：http://jsfiddle.net/maniator/zVZFq/5