如何使用 JavaScript 或 jQuery 同时拖动多个元素? [英] How do I drag multiple elements at once with JavaScript or jQuery?

问题描述

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

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

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

我觉得这个插件很棒.这是一个很好的和流行的图书馆吗?您知道使用它的网站或应用程序吗?

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

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

解决方案

有Draggablejquery 界面

你所要做的就是:

$(selector).draggable();//你就完成了！

参见此处的示例:http://jsfiddle.net/maniator/zVZFq/><小时>

如果你真的想要多拖动，你可以尝试使用一些点击事件来固定块

$('.drag').draggable();$('.drag').click(function(){console.log(这个，'点击')var data = $(this).data('clicked');var all = $('.all');if(data == undefined || data == false){$(this).data('clicked', true);this.style.background = '红色';$(this).draggable('disable');if(all.children().length <= 0){all.draggable().css({顶部:'0px'，左:'0px'，宽度: $(window).width(),高度:$(window).height(),'z-索引':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({顶部:顶部，左:左})$('.all').append($(this));}别的 {$(this).data('clicked', false);this.style.background = '灰色';$(this).draggable('启用');$('body').append($(this));if(all.children() <= 0){all.draggable('销毁');}/*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({顶部:顶部，左:左})*/}})

参见此处的示例:http://jsfiddle.net/maniator/zVZFq/5

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.

I found the demo of threedubmedia's jQuery.event.drag:

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?

Can jQuery UI drag multiple objects?

解决方案

there is Draggable in the jquery UI

all you would have to do is:

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

see example here: 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
        })*/
    }
})

See example here: http://jsfiddle.net/maniator/zVZFq/5

这篇关于如何使用 JavaScript 或 jQuery 同时拖动多个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！