用jQueryUI拖动可拖动的对象
我想要使用jQuery的可拖/放，让用户select一组对象（每个对angular有一个checkbox），然后将所有选定的对象作为一个组…
我无法弄清楚我的生活如何做到这一点哈哈。
这是我想的将导致一个可用的解决scheme，在每个可拖动的对象，使用start（）事件，并以某种方式抓住所有其他选定的对象，并将其添加到select
我还在考虑只是为了提高性能，将拖拽的对象看起来像一组对象（它们是图像，所以可能是一堆照片）。 如果一次拖动几十个对象，我认为使用可拖动function可能会失败，这听起来像是一个更好的主意吗？
您可以使用可拖动的helper选项来拖动项目组。
例如，如果您的可拖动对象具有checkbox，则可以像下面这样从助手函数中返回所选项目：
$('#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; } });
演示
我已经用checkbox和stream畅的布局设置了可拖动图像的演示。 点击底部的“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>
绩效理念：
做一个不可见的“组对象”。 当这些项目被选中时，使它们成为组对象的子对象，当被选中时，将它们设置为文档主体的子对象，或静态父对象或其他对象。 您必须翻译对象的位置以确保它们不会跳来跳去，还可以在添加/删除鼠标事件处理程序时将其附加/分离到组的子项中。
当你在任何一个孩子身上发生鼠标向下/向上的事件时，你将要移动的实际上就是那个组合对象。
这应该使整体更简单。
这是我正在尝试做的确切的事情。 到目前为止，我还没有取得成功，但我发现这个人是以非常复杂的方式完成的。 你可以检查一下，也许你可以做到这一点。
这应该是一个可拖动的function。 我希望他们早一点实施
我为这个所做的是创build一个函数，你给奴隶/主元素，创build一个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'); } }
一旦我有一个工作的例子，我想我会发布更多。 现在这是为我工作。 缺less的是一种调用重叠（从属，主）与你想组合在一起的元素的方法。 我正在以一种非常具体的方式来做这件事。 我敢肯定，你可以巧妙地做到这一点。
