我希望能够使用 jQuery 拖动一组元素，就像我在 Windows 桌面上选择并拖动多个图标一样。
我找到了Threedubmedia 的 jQuery.event.drag的演示：
http://threedubmedia.com/code/event/drag/demo/multi
http://threedubmedia.com/code/event/drag#demos
我觉得这个插件很棒。这是一个很好的和流行的图书馆吗？您知道使用它的网站或应用程序吗？
是否有其他库或插件可以拖动多个对象？
可以jQuery UI的拖动多个对象？
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);
})
}
我是threedubmedia 插件的作者。我添加了此功能以支持多个元素，因为我在其他任何地方都找不到令人满意的解决方案。
如果您需要一个适用于 jQuery UI 的解决方案，这里有一个插件，它添加了一些多拖动功能，尽管演示在 Firefox for Mac 中似乎无法正常工作。
http://www.myphpetc.com/2009/11/jquery-ui-multiple-draggable-plugin.html
这对我有用。
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 和 green 提供了几乎完美的解决方案。
我想补充一下（这在谷歌中很受欢迎），因为这个线程中的插件都没有工作，而且 jquery ui 不支持它的诞生，这是一个简单而优雅的解决方案。
将可拖动元素包装在一个容器中并使用一个事件将它们一次性全部拖动，这允许单个可拖动元素和多可拖动元素（但不是真正的选择性可拖动元素）。
jQuery(document).click(function(e) {
if(e.shiftKey) {
jQuery('#parent-container').draggable();
}
});
看一下这个：
https://github.com/someshwara/MultiDraggable
用法：$(".className").multiDraggable({ group: $(".className")});
将元素组拖到一起。Group 也可以是指定单个元素的数组。
喜欢：$("#drag1").multiDraggable({ group: [$("#drag1"),$("#drag2") ]});