Selection.js

 一个简单轻量级的库，用于实现可视DOM选择，例如在桌面上。没有jQuery。支持任何CSS库，例如Bootstrap。包括垂直和水平滚动支持。 

特征

• 支持触摸设备
• 用法简单
• 没有jQuery
• 垂直和水平滚动支持

安装

通过npm

npm install @simonwep/selection-js --save

用法

const options = {

  // All elements with the class 'selectable' selectable.
  selectables: ['.selectable']
};
const selection = Selection.create(options);

选项

const selection = new Selection({

    // Class for the selection-area-element
    class: 'selection-area',

    // px, how many pixels the point should move before starting the selection
    startThreshold: 10,

    // Disable the selection functionality for touch devices
    disableTouch: false,

    // On which point an element should be selected.
    // Available modes are cover (cover the entire element), center (touch the center) or
    // the default mode is touch (just touching it).
    mode: 'touch',

    // Enable single-click selection (Also disables range-selection via shift + ctrl)
    singleClick: true,

    // Query selectors from elements which can be selected
    selectables: [],

    // Query selectors for elements from where a selection can be start
    startareas: ['html'],

    // Query selectors for elements which will be used as boundaries for the selection
    boundaries: ['html'],

    // Query selector or dom node to set up container for selection-area-element
    selectionAreaContainer: 'body',

    // On scrollable areas the number on px per frame is devided by this amount.
    // Default is 10 to provide a enjoyable scroll experience.
    scrollSpeedDivider: 10,

    // Will be called before the selection starts (mouse / touchdown). Can be used
    // to specify which action / mousebutton are needed to start the selection.
    validateStart(evt) {
        evt; // MouseEvent or TouchEvent

        // Return true to start the selection, false to cancel it.
        return true;
    },

    // Element selection stardet, see Events for details
    onStart(evt) {
        evt.selection;
        evt.eventName;
        evt.areaElement;
        evt.originalEvent;
        evt.selectedElements;
        evt.changedElements;
    },

    // Single-click selection
    onSelect(evt) {
       // Same properties as onStart
       evt.target; // Clicked element
    },

    // Element selection move
    onMove(evt) {
       // Same properties as onStart
    },

    // Element selection stopped
    onStop(evt) {
       // Same properties as onStart
    },

    // Filter single element
    selectionFilter(evt) {
       evt.selection; // This selection instance
       evt.eventName; // The event name
       evt.element;   // The element which is in the current selection
       // return true to keep the element in the current selection
    }
});

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/2164