如何用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 }); } });
};
