如何使用JavaScript或jQuery同时拖动多个元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (123)

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

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

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

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

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

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

提问于
用户回答回答于

在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

用户回答回答于

我是threedubmedia插件的作者。我添加了此功能以支持多个元素,因为我无法在其他任何地方找到满意的解决方案。

如果您需要一个与jQuery UI一起使用的解决方案,这里有一个插件可以添加一些多拖动功能,虽然这些演示似乎在Firefox for Mac中无法正常工作。

http://www.myphpetc.com/2009/11/jquery-ui-multiple-draggable-plugin.html

扫码关注云+社区

领取腾讯云代金券