如何使用JavaScript或jQuery一次拖动多个元素？
如何使用JavaScript或jQuery一次拖动多个元素？
提问于 2011-04-15 22:09:42
我希望能够使用jQuery拖动一组元素，就像我在Windows桌面上选择并拖动多个图标一样。
我找到了 the‘s jQuery.event.drag的演示
http://threedubmedia.com/code/event/drag/demo/multi
http://threedubmedia.com/code/event/drag#demos
我认为这个插件很棒。这是一个好的和受欢迎的库吗？你知道使用它的网站或应用程序吗？
有没有其他的库或者插件来拖拽多个对象？
jQuery UI是否可以拖动多个对象？
回答 8
Stack Overflow用户
回答已采纳
发布于 2011-04-15 22:13:05
在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
Stack Overflow用户
发布于 2011-04-15 23:10:10
我是三个插件的作者。我添加了此功能以支持多个元素，因为我在其他地方找不到令人满意的解决方案。
如果你需要一个使用Firefox UI的解决方案，这里有一个插件，它添加了一些多拖动功能，尽管演示程序似乎不能在jQuery for Mac中正常工作。
http://www.myphpetc.com/2009/11/jquery-ui-multiple-draggable-plugin.html
Stack Overflow用户
发布于 2011-04-16 00:02:20
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);
})
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5677993
复制相关文章
相似问题
腾讯云开发者
