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

我想能够用jQuery拖动一组元素,就像我在Windows桌面上select并拖动多个图标一样。

我发现了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/

 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); }) } 

我是jquery拖放事件插件的作者。 我添加了这个function来支持多个元素,因为在其他地方找不到满意的解决scheme。

如果你需要一个适用于jQuery UI的解决scheme,下面是一个增加了一些多拖动function的插件,虽然这些演示似乎在firefox 4 mac中不能正常工作。

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

我想添加(这在谷歌上涨),因为没有任何插件在这个线程工作,并不是由jquery ui,一个简单的优雅的解决scheme支持耶稣诞生。

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

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

看一下这个:

https://github.com/someshwara/MultiDraggable

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

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

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

这对我有效。

这里的小提琴:

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

把你的物品放入一个容器,并使这个容器可拖动。 您需要将handle选项设置为您的item元素的一个类。 你也需要在拖动后重新计算项目的位置。 显然,当你取消select物品时,你必须从这个容器中取出物品并放回原点。

这是我使用的,在我的情况下工作。

 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 }); } }); 

};