moveable配套依赖selecto中文文档

同moveable中文文档

selecto官方Api文档

初始化及属性

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");
  });
});