問題描述

我希望能夠使用 jQuery 拖動一組元素，就像我在 Windows 桌面上選擇并拖動多個圖標一樣.

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.

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

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?

jQuery UI可以拖動多個對象嗎?

推薦答案

里面有 Draggablejquery 用戶界面

there is Draggable in the jquery UI

您所要做的就是:

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

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

如果你真的想要多重拖動，你可以嘗試使用一些點擊事件來將塊固定在適當的位置

If you really want multidragging you can try using some click events to hold the blocks in 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
        })*/
    }
})

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

這篇關于如何使用 JavaScript 或 jQuery 一次拖動多個元素?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！