Drag拖动选择插件(原创)

 查看演示  website  立即下载

更新时间：2019-11-23 00:24:04

更新说明：演示文档新增全选、全不选、反选按钮

更新时间：2019-11-21 00:16:46

DragSelect

简单的javascript拖动选择功能插件，类似 window 系统文件拖动选择效果，不依赖任何第三方项目

安装教程

1.CDN

<script src="https://thibaultjanbeyer.github.io/DragSelect/ds.min.js"></script>

2.npm

npm install --save dragselect

3.bower

bower install --save dragselect

4.将ds.min.js直接存放至你的网站空间

使用说明

1.一个最基础的实例，填写可被选中的元素

new DragSelect({
  selectables: document.getElementsByClassName('selectable-nodes')
});

2.在限定区域内生效，只能在选定的容器内部使用

new DragSelect({
  selectables: document.getElementsByClassName('selectable-nodes'),
  area: document.getElementById('area')
});

3.其他扩展，所有选项都是可选的，详情看参数和方法

var ds = new DragSelect({
  selectables: document.getElementsByClassName('selectable-nodes'), // 可被选中的元素节点
  selector: document.getElementById('rectangle'), // 可手动添加一个拖动选择框（译者：可用于修改拖动选择框的样式，需要手动添加 css 的 position:absolute 样式）
  area: document.getElementById('area'), // 拖动生效的区域，如果未提供，它将是整个网页文档
  customStyles: false,  // 如果设置为true，则默认情况下拖动选择框将不应用任何样式（绝对位置除外）
  multiSelectKeys: ['ctrlKey', 'shiftKey', 'metaKey'],  // 允许多选的特殊键，默认为 ctrl，shift，meta(Mac系统的专有键)
  multiSelectMode: false,  // 如果设置为true，则默认情况下将启用多选行为，而无需使用多选键，默认值：false
  autoScrollSpeed: 3,  // 选择时区域滚动的速度（如果有），单位是像素，设置为0以禁用自动滚动，默认值：1
  onDragStart: function(element) {}, // 用户点击该区域时触发此回调，在DragSelect函数代码运行之后执行，用于设置事件侦听器
  onDragMove: function(element) {}, // 用户拖动该区域时触发此回调，在DragSelect函数代码运行之后执行，用于设置事件侦听器   
  onElementSelect: function(element) {}, // 每次选择元素时触发的回调函数
  onElementUnselect: function(element) {}, // 每次取消选择元素时触发的回调函数
  callback: function(elements) {} // 用户释放鼠标后触发，返回所有被选定的元素节点
});
// 如果像我们一样将函数添加到变量中，则可以访问其所有函数
// 然后我们就可以先这样使用 start() 和 stop() 方法了
ds.getSelection();  // 返回所有被选定的元素节点
ds.addSelectables(document.getElementsByClassName('selectable-node'));  // 添加可以选择的元素，智能算法保证不会添加同个元素两次
ds.break();  // 在回调中使用以禁用即将执行的代码（译者：暂不知道有什么用）
ds.stop();  // 暂停功能
ds.start();  // 暂停后重启功能
// 还有更多内容，请参见文档中的“方法”部分

参数

所有选项都是可选的

方法

当函数保存到变量var foo = new DragSelect（）中时，您可以访问其所有内部函数。

还有更多其他的方法，您可以在官方的文档中找到所有内容，这里只列举最常用的：

PREVIOUS:
NEXT:
jQuery图片左右切换
js响应式滑动轮播图