使用 jquery-uidraggable 对可拖动对象进行分组
-
16-09-2019 - |
题
我想使用 jquery Draggable/droppable 让用户选择一组对象(每个对象在角落里都有一个复选框),然后将所有选定的对象作为一组拖动...
我一辈子都不知道该怎么做,哈哈。
我认为这将导致一个可用的解决方案,在每个可拖动对象上,使用 start() 事件并以某种方式获取所有其他选定对象并将它们添加到选择中
出于性能原因,我还在考虑使拖动的对象看起来像一组对象(它们是图像,所以可能是一堆照片)。我认为如果您一次拖动几十个对象,使用可拖动功能可能会失败,这听起来是一个更好的主意吗?
解决方案
您可以使用可拖动的 helper
拖动项目组的选项。
例如,如果您的拖放物具有复选框,则可以从助手功能中返回所选项目:
$('#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;
}
});
演示
我已经设置了一个带有可拖动图像的演示,并带有复选框和一些流体布局。单击底部的“运行代码段”以查看结果:
$(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>
其他提示
表演想法:
制作一个看不见的“组对象”。检查物品时,将他们的子对象的子女置于未选中时,将它们放回文档主体,静态父母或其他任何东西。您必须翻译对象的位置,以确保它们不会跳跃,还要在添加/删除它们时将鼠标事件处理程序附加到小组的孩子。
当您在任何一个孩子上获得鼠标倒下/UP事件时,您将移动的实际上是该组对象。
这应该使整体更简单。
这正是我正在尝试做的事情。到目前为止我还没有成功,但我发现 这家伙做到了 以一种非常复杂的方式。你可以检查一下,也许你可以用它做点什么。
这应该是draggable中的一个功能。我希望他们尽快实施
我为此所做的是创建一个函数,您可以将奴隶 /主元素赋予,该功能为主人创建一个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');
}
}
我想一旦我有一个工作示例,我就会发布更多。就目前而言,这对我有用。缺少的是一种将重叠(从属,主)与您要组合在一起的元素的方法。我正在以一种非常具体的方式进行此操作。我敢肯定,您可以聪明地做到这一点。