使用 jquery-ui draggable 对可拖动对象进行分组 [英] grouping draggable objects with jquery-ui draggable

查看：37
本文介绍了使用 jquery-ui draggable 对可拖动对象进行分组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

出于性能原因，我还考虑将拖动的对象看起来像一组对象(它们是图像，所以可能是一堆照片).我认为如果您一次拖动几十个对象，使用可拖动功能可能会失败，这听起来是不是更好的主意?

解决方案

您可以使用 draggable 的 helper 选项来拖动项目组.

例如，如果您的可拖动对象有复选框，您可以像这样从辅助函数返回所选项目:

$('#dragSource li').draggable({助手:函数(){var selected = $('#dragSource input:checked').parents('li');if (selected.length === 0) {选择 = $(this);}var container = $('<div/>').attr('id', 'draggingContainer');container.append(selected.clone());返回容器；}});

演示

我已经设置了一个带有复选框的可拖动图像和有点流畅的布局的演示.点击底部的运行代码片段"查看结果:

$(function() {$('#dragSource li').draggable({助手:函数(){var selected = $('#dragSource input:checked').parents('li');if (selected.length === 0) {选择 = $(this);}var container = $('<div/>').attr('id', 'draggingContainer');container.append(selected.clone());返回容器；}});$('#dropTarget').droppable({容差:'指针'，下降:功能(事件，用户界面){$(this).append(ui.helper.children());}});$('#selectAll').click(function() {$('#dragSource input').prop('checked', true);返回假；});$('#selectNone').click(function() {$('#dragSource input').prop('checked', false);返回假；});$('#selectInvert').click(function() {$('#dragSource input').each(function() {var $this = $(this);if ($this.prop('checked')) {$this.prop('checked', false);} 别的 {$this.prop('checked', true);}});返回假；});});

body {字体系列:无衬线；溢出-x:隐藏；}div {边距:5px；填充:0；}ul{边距:0；填充:0；}李{列表样式:无；填充:0；边距:0；向左飘浮;空白:nowrap；}#selectActions 跨度，#selectActions li {向左飘浮;填充:5px；}.droppableContainer {宽度:48%；向左飘浮;最小高度:200px}.droppableContainer li {高度:90px；宽度:110px；边距:2px；背景颜色:白色；填充底部:4px；}.droppableContainer img {宽度:90px；最大高度:90px；最大宽度:90px；宽度:90px；垂直对齐:中间；}.droppableContainer 输入 {高度:90px；垂直对齐:中间；}#draggingContainer {宽度:48%；}#draggingContainer 输入 {可见性:隐藏；}#dropTarget {边框:3px 灰色虚线；}#dropTarget 输入 {可见性:隐藏；}

<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>选择:</span><ul><li><a id="selectAll" href="#">all</a><li><a id="selectNone" href="#">none</a><li><a id="selectInvert" href="#">invert</a>

<div style="clear:left;"><div id="dragSource" class="droppableContainer"><ul><li><img src="http://imgs.xkcd.com/comics/drapes.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/misusing_slang.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/donner.jpg"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/a_new_captcha_approach.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/bug.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/open_source.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/tag_combination.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/a_simple_plan.jpg"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/it_might_be_cool.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/hedgeclipper.jpg"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/pep_talk.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/regular_expressions.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/pwned.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/post_office_showdown.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/im_an_idiot.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/pointers.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/chess_photo.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/50_ways.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/e_to_the_pi_times_i.png"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/self-reference.jpg"/><input type="checkbox"/><li><img src="http://imgs.xkcd.com/comics/starwatching.png"/><input type="checkbox"/>

<div id="dropTarget" class="droppableContainer">

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...

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

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?

解决方案

You could use the draggable's helper option to drag groups of items.

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:

$(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>

这篇关于使用 jquery-ui draggable 对可拖动对象进行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆