投稿

Selecto.js：JavaScript美的不可方物拖拽类库

Vedu • • 资源分享 • 阅读 1558

简要介绍

Selecto.js是一款可以通过鼠标或者触摸实现拖拽的JavaScript组件。它在github上有756颗星，它支持React、Vue、Angulard的主流框架，它的官网做得很漂亮。这个组件虽然没有想到它可以用在什么地方，但是个人觉得非常有趣。

JavaScript美的不可方物拖拽类库Selecto.js

Github地址

https://github.com/daybrush/selecto

安装

npm install selecto

引用

效果

JavaScript美的不可方物拖拽类库Selecto.js
JavaScript美的不可方物拖拽类库Selecto.js

import Selecto from “selecto”;

const selecto = new Selecto({

// The container to add a selection element

container: document.body,

// The area to drag selection element (default: container)

dragContainer: Element,

// Targets to select. You can register a queryselector or an Element.

selectableTargets: [“.target”, document.querySelector(“.target2”)],

// Whether to select by click (default: true)

selectByClick: true,

// Whether to select from the target inside (default: true)

selectFromInside: true,

// After the select, whether to select the next target with the selected target (deselected if the target is selected again).

continueSelect: false,

// Determines which key to continue selecting the next target via keydown and keyup.

toggleContinueSelect: “shift”,

// The container for keydown and keyup events

keyContainer: window,

// The rate at which the target overlaps the drag area to be selected. (default: 100)

hitRate: 100,

});

selecto.on(“select”, e => {

e.added.forEach(el => {

el.classList.add(“selected”);

});

e.removed.forEach(el => {

el.classList.remove(“selected”);

});

});

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/19917.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2021-01-14 13:58
下一篇 2021-01-15 03:36

相关推荐

发表评论

登录后才能评论