如何用JavaScript或jQuery一次拖動多個元素？

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

存在了jQuery UI

所有你必須做的Draggable是：

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

看到這裏的例子：http://jsfiddle.net/maniator/zVZFq/

Answer 2

我jQuery的拖/丟棄事件的作者插入。我添加了支持多個元素的功能，因爲我無法在其他任何地方找到令人滿意的解決方案。

如果你需要一個與jQuery UI配合使用的解決方案，這裏有一個插件，它增加了一些多點拖動功能，雖然這些演示在firefox 4 mac中似乎不能正常工作。

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

Answer 3

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 4

檢查了這一點：

https://github.com/someshwara/MultiDraggable

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

拖動元件組在一起。組也可以是指定單個元素的數組。

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

Answer 5

我想補充（這種高即將在谷歌），因爲沒有在這個線程插件的工作，它不是通過jQuery用戶界面，簡單優雅的解決方案支持的誕生。

裹在一個容器中的可拖動元素，並且使用事件也把他們一下子，這使得單打拖拽元素和multidraggables（但不是真的選擇性拖拽元素）。

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

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

Answer 6

將您的物品放入某個容器並使該容器可拖動。您需要將handle選項設置爲您的項目元素的一個類。您也需要在拖動後重新計算物品位置。很明顯，當你取消選擇物品時，你必須將它們從這個容器中取出並放回原點。

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

這爲我工作。

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和綠色爲幾乎完美的解決方案。