使用 jquery-ui draggable 对可拖动对象进行分组

Posted 2023-05-08

【中文标题】使用 jquery-ui draggable 对可拖动对象进行分组

【英文标题】：grouping draggable objects with jquery-ui draggable

【发布时间】：2010-10-22 01:39:19

【问题描述】：

我想用jquery draggable/droppable让用户选择一组对象（每一个在角落都有一个复选框），然后将所有选定的对象作为一个组拖动...

我这辈子都不知道该怎么做哈哈。

我认为这将导致一个可用的解决方案，在每个可拖动对象上，使用 start() 事件并以某种方式抓取所有其他选定对象并将它们添加到选择中

出于性能原因，我还考虑让拖动的对象看起来像一组对象（它们是图像，所以可能是一堆照片）。我认为如果一次拖动几十个对象，使用可拖动功能可能会失败，这听起来是不是更好？

【参考方案1】：

您可以使用 draggable 的 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; 
  
); 

演示

我已经设置了一个演示，其中包含带有复选框和一些流畅布局的可拖动图像。点击底部的“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>

【讨论】：

使用 JQueryUI 1.7.2，您应该能够将其与 Selectable 而不是复选框混合使用。

你能把示例放在 jsfiddle 中吗？ jsbin 示例已过期。

@IAbstract 感谢您告诉我，我已经修复了演示。

@brianpeiris，我可以请您在这里查看一个 jQuery droppable 相关问题：***.com/questions/51301758/… 吗？

如果此示例中的元素可以使用鼠标套索选择，那将是理想的选择。因此，您只需用鼠标“抓取”多个元素即可。这可能吗？

【参考方案2】：

性能理念：

制作一个不可见的“组对象”。当项目被选中时，使它们成为组对象的子对象，当未选中时，将它们设置回文档正文的子对象，或者静态父对象或其他任何东西。您必须转换对象的位置以确保它们不会跳来跳去，还要在添加/删除它们时将鼠标事件处理程序附加/分离到组的子级。

当您在任何孩子上获得鼠标向下/向上事件时，您将移动的实际上是该组对象。

这应该使它整体上更简单。

【讨论】：

如果不是流畅的布局会更简单 ;)

【参考方案3】：

这正是我想要做的事情。到目前为止，我还没有成功，但是我以非常复杂的方式找到了this guy done it。你可以检查一下，也许你可以用它做点什么。

这应该是可拖动的功能。我希望他们早日实施它

【参考方案4】：

我为此所做的是创建了一个函数，您将其赋予从属/主元素，该函数为主元素创建一个 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');

         
    

我想一旦我有一个工作示例，我会在此发布更多内容。就目前而言，这对我有用。缺少的是一种将要组合在一起的元素调用重叠（从属，主控）的方法。我正在以一种非常具体的方式来做这件事。我敢肯定，你可以用聪明的方法来做到这一点。