使用 jquery-ui draggable 对可拖动对象进行分组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/793559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
grouping draggable objects with jquery-ui draggable
提问by Jiaaro
I want to use jquery draggable/droppable to let the user select a group of objects (each one has a checkbox in the corner) and then drag all the selected objects as a group...
我想使用 jquery draggable/droppable 让用户选择一组对象（每个对象的角落都有一个复选框），然后将所有选定的对象作为一个组拖动......
I can't figure out for the life of me how to do it haha.
我这辈子都不知道该怎么做哈哈。
Here is what I'm thinking will lead to a usable solution, on each draggable object, use the start() event and somehow grab all the other selected objects and add them to the selection
这是我在想将导致一个可用的解决方案，在每个可拖动对象上，使用 start() 事件并以某种方式抓取所有其他选定的对象并将它们添加到选择中
I was also considering just making the dragged object look like a group of objects (they're images, so a pile of photos maybe) for performance reasons. I think using the draggable functionality might fall over if you drag several dozen objects at once, does that sound like a better idea?
出于性能原因，我还考虑让拖动的对象看起来像一组对象（它们是图像，所以可能是一堆照片）。我认为如果您一次拖动几十个对象，使用可拖动功能可能会失败，这听起来是不是一个更好的主意？
回答by brianpeiris
You could use the draggable's helperoption to drag groups of items.
您可以使用可拖动helper选项来拖动项目组。
For example, if your draggables have checkboxes, you can return the selected items from the helper function like so:
例如，如果您的可拖动对象有复选框，您可以像这样从辅助函数返回所选项目：
$('#dragSource li').draggable({
helper: function(){
var selected = $('#dragSource input:checked').parents('li');
if (selected.length === 0) {
selected = $(this);
}
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone());
return container;
}
});
Demo
演示
I've setup a demo with draggable images with checkboxes and somewhat fluid layout. Click "Run Code Snippet" at the bottom to see the result:
我已经设置了一个带有复选框的可拖动图像和有点流畅的布局的演示。点击底部的“Run Code Snippet”查看结果：
$(function() {
$('#dragSource li').draggable({
helper: function() {
var selected = $('#dragSource input:checked').parents('li');
if (selected.length === 0) {
selected = $(this);
}
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone());
return container;
}
});
$('#dropTarget').droppable({
tolerance: 'pointer',
drop: function(event, ui) {
$(this).append(ui.helper.children());
}
});
$('#selectAll').click(function() {
$('#dragSource input').prop('checked', true);
return false;
});
$('#selectNone').click(function() {
$('#dragSource input').prop('checked', false);
return false;
});
$('#selectInvert').click(function() {
$('#dragSource input').each(function() {
var $this = $(this);
if ($this.prop('checked')) {
$this.prop('checked', false);
} else {
$this.prop('checked', true);
}
});
return false;
});
});body {
font-family: sans-serif;
overflow-x: hidden;
}
div {
margin: 5px;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
padding: 0;
margin: 0;
float: left;
white-space: nowrap;
}
#selectActions span,
#selectActions li {
float: left;
padding: 5px;
}
.droppableContainer {
width: 48%;
float: left;
min-height: 200px
}
.droppableContainer li {
height: 90px;
width: 110px;
margin: 2px;
background-color: white;
padding-bottom: 4px;
}
.droppableContainer img {
width: 90px;
max-height: 90px;
max-width: 90px;
width: 90px;
vertical-align: middle;
}
.droppableContainer input {
height: 90px;
vertical-align: middle;
}
#draggingContainer {
width: 48%;
}
#draggingContainer input {
visibility: hidden;
}
#dropTarget {
border: 3px dashed grey;
}
#dropTarget input {
visibility: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="selectActions">
<span>Select:</span>
<ul>
<li><a id="selectAll" href="#">all</a>
</li>
<li><a id="selectNone" href="#">none</a>
</li>
<li><a id="selectInvert" href="#">invert</a>
</li>
</ul>
</div>
<div style="clear:left;">
<div id="dragSource" class="droppableContainer">
<ul>
<li>
<img src="http://imgs.xkcd.com/comics/drapes.png" /><input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/misusing_slang.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/donner.jpg" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/a_new_captcha_approach.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/bug.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/open_source.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/tag_combination.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/a_simple_plan.jpg" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/it_might_be_cool.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/hedgeclipper.jpg" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/pep_talk.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/regular_expressions.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/pwned.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/post_office_showdown.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/im_an_idiot.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/pointers.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/chess_photo.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/50_ways.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/e_to_the_pi_times_i.png" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/self-reference.jpg" />
<input type="checkbox" />
</li>
<li>
<img src="http://imgs.xkcd.com/comics/starwatching.png" />
<input type="checkbox" />
</li>
</ul>
</div>
<div id="dropTarget" class="droppableContainer">
</div>
</div>回答by Paul
Performance Idea:
性能理念：
Make an invisible 'group object'. When the items are checked, make them children of the group object, when unselected, set them back as children of the document body, or static parent or whatever. You'll have to translate the objects' position to make sure they don't jump around, also attach/detach your mouse event handlers to the children of the group as you add/remove them.
制作一个不可见的“组对象”。当项目被选中时，使它们成为组对象的子项，当取消选择时，将它们重新设置为文档正文的子项，或静态父项或其他任何内容。您必须平移对象的位置以确保它们不会四处跳跃，并且在添加/删除它们时将鼠标事件处理程序附加/分离到组的子项。
When you get a mouse down/up event on any of the children, what you'll move is actually that group object.
当您在任何一个孩子上获得鼠标按下/按下事件时，您将移动的实际上是该组对象。
This should make it simpler overall.
这应该使它整体更简单。
回答by Allen Bargi
This the exact thing I'm trying to do. So far I've not been successful, but I've found this guy done itin a very complicated way. you could check it out maybe you could do somthing with that.
这正是我正在尝试做的事情。到目前为止，我还没有成功，但我发现这个人以一种非常复杂的方式做到了。你可以检查一下，也许你可以用它做一些事情。
This should be a feature in draggable. I hope they implement it sooner than later
这应该是可拖动的一个功能。我希望他们早日实施
回答by kvnn
What I've done for this is created a function that you give the slave / master elements to, which creates a bind() function for the master (I'm only allowing a drag from the master in this case, you can work around this I'm sure), which makes the slave follow it around using standard jQuery css.
我为此所做的是创建了一个函数，您可以将其提供给从属/主元素，该函数为主元素创建一个 bind() 函数（在这种情况下，我只允许从主元素拖动，您可以解决这个我确定），这使得奴隶使用标准的 jQuery css 跟随它。
function overlap(slave,master) {
$('a#groupTheseBlocks').click(function(){
master.bind('drag', groupBlocks);
slave.draggable('disable');
// remember where the slave is in relation to the master
sLeftRef = (slave.offset().left - master.offset().left);
sTopRef = (slave.offset().top - master.offset().top);
});
function groupBlocks() {
var left = master.offset().left;
var top = master.offset().top;
slave.draggable('disable');
slave.css('left', (left + sLeftRef) + 'px');
slave.css('top', (top + sTopRef) + 'px');
}
}
I guess I'll post more to this once I have a working example. As it stands this is working for me. What is missing is a way to call overlap(slave, master) with the elements you want to group together. I'm doing this in a really specific way. You can clever a way to do it, I'm sure.
我想一旦我有一个工作示例，我会发布更多内容。就目前而言，这对我有用。缺少的是一种使用您想要组合在一起的元素调用重叠（从属，主控）的方法。我正在以一种非常具体的方式来做这件事。你可以聪明地做到这一点，我敢肯定。
