blocks|key|2742991|text|在jquery+UI中有Draggable|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2742992|你所要做的就是：|2742993|$(selector).draggable();+//+and+you+are+done!|code-block|syntax|javascript|2742994|请参阅此处的示例：http://jsfiddle.net/maniator/zVZFq/|2742995|2742996|如果您确实想要多点拖动，可以尝试使用一些单击事件将块保持在适当的位置|2742997|$('.drag').draggable();

$('.drag').click(function(){
++++console.log(this,+'clicked')
++++var+data+=+$(this).data('clicked');
++++var+all+=+$('.all');
++++if(data+==+undefined+%7C%7C+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',''))+%2B
++++++++++++++++++++parseInt($(this).css('top').replace('px',''))
++++++++var+left+=+parseInt(all.css('left').replace('px',''))+%2B
++++++++++++++++++++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
++++++++})*/
++++}
})|2742998|请参阅此处的示例：http://jsfiddle.net/maniator/zVZFq/5|2742999|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/demos/draggable/|1|http://jsfiddle.net/maniator/zVZFq/|2|http://jsfiddle.net/maniator/zVZFq/5^0|C|9|0|0|0|0|9|Z|1|0|0|0|0|9|10|2|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1A|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1B|8|@]|9|@$A|1C|B|1D|1|1E]]|C|$]]|$1|M|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1G|8|@]|9|@]|C|$]]|$1|P|3|Q|5|H|7|1H|8|@]|9|@]|C|$I|J]]|$1|R|3|S|5|6|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]]|C|$]]|$1|T|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]|11|$5|W|X|Y|C|$Z|12]]|13|$5|W|X|Y|C|$Z|14]]]]

there is <a href="http://jqueryui.com/demos/draggable/" rel="nofollow noreferrer">Draggable</a> in the jquery UI

all you would have to do is:

<pre><code>$(selector).draggable(); // and you are done!
</code></pre>

see example here: <a href="http://jsfiddle.net/maniator/zVZFq/" rel="nofollow noreferrer">http://jsfiddle.net/maniator/zVZFq/</a>

<hr>

If you really want multidragging you can try using some click events to hold the blocks in place 

<pre><code>$('.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 &lt;= 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() &lt;= 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
 })*/
 }
})
</code></pre>

See example here: <a href="http://jsfiddle.net/maniator/zVZFq/5" rel="nofollow noreferrer">http://jsfiddle.net/maniator/zVZFq/5</a>

blocks|key|50748|text|我是三个插件的作者。我添加了此功能以支持多个元素，因为我在其他地方找不到令人满意的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|50749|如果你需要一个使用Firefox+UI的解决方案，这里有一个插件，它添加了一些多拖动功能，尽管演示程序似乎不能在jQuery+for+Mac中正常工作。|50750|http://www.myphpetc.com/2009/11/jquery-ui-multiple-draggable-plugin.html|offset|length|50751|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|20|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

I am the author of the of the threedubmedia plugins. I added this functionality for supporting multiple elements, because I could not find a satisfactory solution anywhere else. 

If you need a solution that works with the jQuery UI, here is a plugin which adds some multi-drag functionality, though the demos don't seem to work correctly in Firefox for Mac.

<a href="http://www.myphpetc.com/2009/11/jquery-ui-multiple-draggable-plugin.html" rel="nofollow noreferrer">http://www.myphpetc.com/2009/11/jquery-ui-multiple-draggable-plugin.html</a>

blocks|key|50394|text|var+selectedObjs;
var+draggableOptions+=+{
++++start:+function(event,+ui)+{
++++++++//get+all+selected...
++++++++selectedObjs+=+$('div.selected').filter('[id!='%2B$(this).attr('id')%2B']');
++++},
++++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%2Bol);
++++++++$this.css('top',+t%2Bot);
++++})
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|50395|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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);
 })
}
</code></pre>

blocks|key|2533151|text|看看这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2533152|https://github.com/someshwara/MultiDraggable|offset|length|2533153|用法：$(".className").multiDraggable({+group:+$(".className")});|style|CODE|2533154|将一组元素拖动到一起。Group也可以是指定单个元素的数组。|2533155|喜欢：$("#drag1").multiDraggable({+group:+[$("#drag1"),$("#drag2")+]});|2533156|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|18|0|0|3|1M|0|0|3|1T|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@$D|10|E|11|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|13|8|@$D|14|E|15|H|I]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|C]]]]

Check this out:

<a href="https://github.com/someshwara/MultiDraggable" rel="nofollow">https://github.com/someshwara/MultiDraggable</a>

Usage:<code>$(".className").multiDraggable({ group: $(".className")});</code>

Drags the group of elements together. Group can also be an array specifying individual elements.

Like:<code>$("#drag1").multiDraggable({ group: [$("#drag1"),$("#drag2") ]});</code>

blocks|key|51712|text|我想补充一下(这在google中很高)，因为这个线程中的插件都不起作用，而且它不是jquery+ui支持的原生特性，这是一个简单而优雅的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|51713|将可拖动元素包装在容器中，并使用事件一次性拖动它们，这允许单个可拖动对象和多个可拖动对象(但不是真正选择性的可拖动对象)。|51714|jQuery(document).click(function(e)+{

++if(e.shiftKey)+{
++++++jQuery('#parent-container').draggable();
++}
});+|code-block|syntax|javascript|51715|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I wanted to add (this coming up high in google), since none of the plugins in this thread worked and it is not nativity supported by jquery ui, a simple elegant solution.

Wrap the draggable elements in a container and use an event to drag them all at once, this allows for singles draggables and multidraggables (but not really selective draggables).

<pre><code>jQuery(document).click(function(e) {

 if(e.shiftKey) {
 jQuery('#parent-container').draggable();
 }
}); 
</code></pre>

blocks|key|2743080|text|将您的项目放入某个容器中，并使此容器可拖动。您需要将handle选项设置为您的item元素的类。此外，您还需要在拖动后重新计算项目位置。显然，当您取消选择项时，您必须将它们从该容器中取出并放回其原始位置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2743081|entityMap^0|Q|6|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Put your items into some container and make this container draggable. You will need to set <code>handle</code> option to be a class of your item element. Also you will need to recalculate items position after drag. And obviously when you deselect items you have to take them from this container and put back to their origin.

blocks|key|2743116|text|这就是我使用的，在我的案例中起作用的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2743117|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+});+++
++}
});|code-block|syntax|javascript|2743118|}；|2743119|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is what i used, Worked in my case. 

<pre><code>function selectable(){
$('#selectable').selectable({
 stop: function() {
 $('.ui-selectee', this).each(function(){
 if ($('.ui-selectee').parent().is( 'div' ) ) {
 $('.ui-selectee li').unwrap('&lt;div /&gt;');
 }


 });

 $('.ui-selected').wrapAll('&lt;div class=\"draggable\" /&gt;');

 $('.draggable').draggable({ revert : true }); 
 }
});
</code></pre>

};

blocks|key|2533262|text|这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2533263|Fiddle+here:|offset|length|2533264|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:+"+%2B+ol+%2B+":"+%2B+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%2Bol);
++++$this.css('top',+t%2Bot);
})
}|code-block|syntax|javascript|2533265|感谢ChrisThompson和green提供了近乎完美的解决方案。|2533266|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/zVZFq/1445/^0|0|0|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

This worked for me.

<a href="http://jsfiddle.net/zVZFq/1445/" rel="noreferrer">Fiddle here:</a>

<pre><code>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);
})
}
</code></pre>

Thanks to ChrisThompson and green for the almost-perfect solution.

I want to be able to drag a group of elements with jQuery, like if I selected and dragged multiple icons on the Windows desktop.

I found the demo of threedubmedia's jQuery.event.drag:

<a href="http://threedubmedia.com/code/event/drag/demo/multi" rel="noreferrer">http://threedubmedia.com/code/event/drag/demo/multi</a> 
<a href="http://threedubmedia.com/code/event/drag#demos" rel="noreferrer">http://threedubmedia.com/code/event/drag#demos</a>

I think this plugin is great. Is this good and popular library? Do you know websites or applications which use it?

Are there any other libraries or plugins to drag multiple objects? 

Can jQuery UI drag multiple objects?

How do I drag multiple elements at once with JavaScript or jQuery?

Windows

容器

jQuery

我希望能够使用jQuery拖动一组元素，就像我在Windows桌面上选择并拖动多个图标一样。我找到了 the‘s jQuery.event.drag的演示我认为这个插件很棒。这是一个好的和受欢迎的库吗？你知道使用它的网站或应用程序吗？有没有其他的库或者插件来拖拽多个对象？jQuery UI是否可以拖动多个对象？

问如何使用JavaScript或jQuery一次拖动多个元素？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript或jQuery一次拖动多个元素？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript或jQuery一次拖动多个元素？
EN