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

Question

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

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

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

这对我有用。

在这里小提琴：

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 中有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