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

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

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

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

Answer 2

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 3

这对我有用。

Fiddle here:

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和绿色的几乎完美的解决方案。

Answer 4

检查出来：

https://github.com/someshwara/MultiDraggable

用法：$(".className").multiDraggable({ group: $(".className")});

将元素组拖放到一起。组也可以是指定单个元素的数组。

像：$("#drag1").multiDraggable({ group: [$("#drag1"),$("#drag2") ]});

Answer 5

我想添加（这在谷歌中很高），因为这个线程中的所有插件都没有工作，并且它不是jquery ui支持的诞生，这是一个简单优雅的解决方案。

将可拖动元素包装在容器中并使用事件一次拖动它们，这允许单个可拖动和多重可拖动（但不是真正的选择性拖动）。

jQuery(document).click(function(e) {

  if(e.shiftKey) {
      jQuery('#parent-container').draggable();
  }
});

Answer 6

将您的物品放入某个容器中，并使该容器可拖动。您需要将handle选项设置为item元素的类。您还需要在拖动后重新计算项目位置。显然，当你取消选择物品时，你必须从这个容器中拿走它们并放回原点。

Answer 7

这就是我用的，在我的案例中工作。

function selectable(){
$('#selectable').selectable({
  stop: function() {
    $('.ui-selectee', this).each(function(){
        if ($('.ui-selectee').parent().is( 'div' ) ) {
            $('.ui-selectee li').unwrap('<div />');
        }


    });

    $('.ui-selected').wrapAll('<div class=\"draggable\" />');

    $('.draggable').draggable({ revert : true });   
  }
});

};

Answer 8

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

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

8 个答案: