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

2022-01-11 00:00:00 drag-and-drop jquery jquery-plugins javascript jquery-ui

我希望能够使用 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

相关文章