logo标签列表

使用jQuery UI Draggable对可拖动对象进行分组

jqueryjquery-uijquery-ui-draggablejquery-ui-droppable
48

我想使用jQuery的可拖动/可放置功能，让用户选择一组对象（每个对象在角落里都有一个复选框），然后将所有选定的对象作为一组拖动...

我无论如何都搞不清楚如何做哈哈。

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

出于性能原因，我还考虑过只是使被拖动的对象看起来像一组对象（它们是图像，所以可能是一堆照片）。如果你一次拖动几十个对象，使用可拖动功能可能会发生错误，这听起来像是一个更好的主意吗？

4个回答
77

您可以使用可拖动物件的 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>

5
使用 JQueryUI 1.7.2，您应该能够将此与可选择（Selectable）混合使用，而无需复选框。 - Amir
你能把示例放在jsfiddle上吗？jsbin的示例已过期。 - IAbstract
@IAbstract 谢谢您告诉我，我已经修复了演示。 - brianpeiris
@brianpeiris，可以请您看一下这里关于jQuery droppable的问题吗：https://stackoverflow.com/questions/51301758/jquery-droppable-allow-only-one-item-to-be-dropped-on-an-element-and-then-make？ - Istiaque Ahmed
如果在这个例子中可以使用鼠标套索选择元素，那就太理想了。这样你只需要用鼠标“抓住”多个元素，就完成了选择。这种操作是否可行？ - FrenkyB
1
我为此创建了一个函数，您可以将从属/主元素传递给它，该函数会为主元素创建一个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');

        } 
    }

我想一旦我有一个可用的示例，我会再发布更多内容。目前为止，这对我来说是有效的。缺少的是一种调用overlap（slave，master）并将要分组的元素传递给它的方法。我正在以一种非常特定的方式做这个。你肯定可以想出一个聪明的方法来做到这一点。

1
性能优化建议：
创建一个不可见的“组对象”。当选中项目时，将它们设置为组对象的子级；当取消选中时，将它们重新设置为文档主体或静态父级的子级。您需要转换对象的位置以确保它们不会跳动，并在添加/删除它们时附加/分离鼠标事件处理程序到组的子级上。
当您在任何子级上获得鼠标按下/抬起事件时，实际上移动的是该组对象。
这应该可以使整个过程更简单。
如果它不是流式布局的话，那就会更简单了 ;) - Jiaaro
1

这正是我想要做的事情。到目前为止，我还没有成功，但我发现这家伙用了一种非常复杂的方式做到了。你可以看一下，也许你能从中得到灵感。

这应该是可拖动界面的一个功能，我希望他们能尽快实现它。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接