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

Question

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

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

http: //tridubmedia.com/code/event/drag/demo/multi
我

认为这个插件太棒了。这是一个优秀且受欢迎的图书馆吗？您知道使用它的网站或应用程序吗？

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

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

这对我有用。

在这里摆弄：

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

我想补充一下（这在谷歌中排名很高），因为这个线程中的插件都不起作用，而且它不是 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 选项设置为 item 元素的类。此外，您还需要在拖动后重新计算项目位置。显然，当您取消选择项目时，您必须将它们从该容器中取出并放回原处。

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/manianator/zVZFq/5