初始化及属性
import Selecto from "selecto";
const selecto = new Selecto({
// 添加选择元素的容器
container: document.body,
// 选择的根容器(没有转换的容器。(默认值是null)
rootContainer: null,
// 拖动选择元素的区域(默认为container)
dragContainer: Element,
// 要选择的目标。可以注册一个queryselector或Element
selectableTargets: [".target", document.querySelector(".target2")],
// 是否点击选择(默认:true)
selectByClick: true,
// 是否从目标中选择(默认值:true)
selectFromInside: true,
// 选择后，是否选择已选目标器的下一个目标器(再次选择则取消选择)。
continueSelect: false,
// 确定通过按下键和按上键继续选择下一个目标的键。
toggleContinueSelect: "shift",
// keydown和keyup事件的容器
keyContainer: window,
// 目标与要选择的拖动区域重叠的比率。(默认:100)
hitRate: 100,
// 选择比例
ratio: 0
});选择行为
-
如果你想防止从里面选择和没有点击
-
selectFromInside: false
-
selectByClick: false (default)
-
如果你想在从内部选择时不考虑hitTest而包括它
-
selectFromInside: true (default)
-
selectByClick: true
-
如果你想立即完成(selectStart和selectEnd同时出现)，而不需要从内部进行选择时拖动
-
selectFromInside: false
-
selectByClick: true
-
preventDragFromInside: true (default)
-
clickBySelectEnd: false (default)
-
如果你想在停止拖动鼠标(触摸)后选择tend(点击)
-
selectFromInside: false
-
selectByClick: true
-
clickBySelectEnd:
Selecto
Selecto
Methods
checkScroll // 如果在拖动过程中出现滚动，可以手动调用此方法来再次检查位置。
clickTarget // 外部单击或鼠标事件可以应用于选择项。clickTarget(e, clickedTargetopt) → {this}
destroy // 销毁元素、属性和事件。
emit // 触发一个事件来调用侦听器。
findSelectableTargets // 在事件期间更新可选目标。findSelectableTargets(dataopt) → {Array<HTMLElement | SVGElement>}
getSelectableElements // 在selectableTargets中设置所有元素。
getSelectedTargets // 获取当前选择的目标。getSelectedTargets() → {Array<HTMLElement | SVGElement>}
off // 删除在事件目标中注册的侦听器。off(eventNameopt, listeneropt) → {this}
on // 向已注册的事件添加侦听器。on(eventName, listeneropt) → {this}
once // 向已注册的事件添加一个一次性监听器和Use promise。
selectTargetsByPoints // 通过虚拟拖拽从startPoint到endPoint选择目标。inputEvent的目标为null。selectTargetsByPoints(startPoint, endPoint)
setSelectedTargets // 设置当前选择的目标。selectByClick、continueSelect和continueSelectWithoutDeselect不适用。
// setSelectedTargets(selectedTargets) → {SelectedTargets}
setSelectedTargetsByPoints // 可以通过不应用selectByClick、continueSelect和continueSelectWithoutDeselect来设置当前选择的目标。
// setSelectedTargetsByPoints(point1, point2) → {SelectedTargetsWithRect}
trigger // 触发一个事件来调用侦听器。
triggerDragStart // ' OnDragStart '由外部事件触发。triggerDragStart(e)
Events
drag // 当拖动时，将调用拖动事件。如果您有一个特定的元素或不想引发选择，则调用stop()函数
dragEnd // 当拖动结束时(在拖动后触发mouseup或touchend)，将调用dragEnd事件。
dragStart // 当拖动开始时(在mousedown或touchstart上触发)，dragStart事件被调用。如果您有一个特定的元素或不想引发选择，则调用stop()函数
keydown // 当按下在toggleContinueSelect中指定的键时，将调用keydown事件。
keyup // 当按下在toggleContinueSelect中指定的键时，将调用keyup事件。
select // 当实时执行select时，将调用select事件。
selectEnd // 当选择(dragEnd或单击)结束时，将调用selectEnd事件。
selectStart // 当选择(拖动)开始时，将调用selectStart事件。
// 栗子
import Selecto from "selecto";
const selecto = new Selecto({
container: document.body,
selectByClick: true,
selectFromInside: false,
});
selecto.on("keydown", () => { // keydown
document.querySelector(".button").classList.add("selected");
}).on("keyup", () => { // keyup
document.querySelector(".button").classList.remove("selected");
}).on("dragStart", e => { // dragStart
if (e.inputEvent.target.tagName === "SPAN") {
e.stop();
}
}).on("drag", e => { // drag
e.stop();
}).on("select", e => { // select
e.added.forEach(el => {
el.classList.add("selected");
});
e.removed.forEach(el => {
el.classList.remove("selected");
});
}).on("selectStart", e => { // selectStart
e.added.forEach(el => {
el.classList.add("selected");
});
e.removed.forEach(el => {
el.classList.remove("selected");
});
}).on("selectEnd", e => { // selectEnd
e.afterAdded.forEach(el => {
el.classList.add("selected");
});
e.afterRemoved.forEach(el => {
el.classList.remove("selected");
});
});