Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下

关闭

搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
提交资源 / 链接反馈

Selection.js
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://simonwep.github.io/selection/
GitHub:https://github.com/Simonwep/selection
网站描述:一个用于制作可视化DOM选择的简单,轻量级和现代化的库
访问官网 GitHub

 一个简单轻量级的库,用于实现可视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://fly63.com/nav/2164

more>>
相关栏目
react
Facebook开发的一款高效、灵活、声明式设计的JS库
官网 GitHub
AngularJS
Google推出有条理,可维护,易编程的MVVM框架
官网 GitHub
backbone
提供:模型、集合、视图,开发重量级的javascript应用的框架
官网 GitHub
jquery
一个快速、简洁的JavaScript代码库
官网 GitHub
zepto.js
一个轻量级的针对现代高级浏览器的JavaScript库
官网 GitHub
Ember
JavaScript MVC框架,它用来创建复杂的Web应用程序,消除了样板
官网 GitHub
nw.js
轻量级桌面应用开发的捷径
官网 GitHub
socket.io
一个WebSocket库,包括了客户端的js和服务器端的nodejs
官网 GitHub
nuxt.js
基于 Vue.js 的轻量级、服务端渲染 (SSR) 应用框架
官网 GitHub
Next.js
实现react的服务端渲染的框架
官网 GitHub
Electron
基于Chromium 和 Node.js, 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
官网 GitHub
htmx
无需JavaScript的动态HTML
官网 GitHub
Nerv
一款由京东凹凸实验室打造的类React前端框架
官网 GitHub
lodash
一致性、模块化、高性能的 JavaScript 实用工具库
官网 GitHub
ocLazyLoad
AngularJS 的延迟加载(惰性加载)模块和组件
点击进入 GitHub
weui.js
WeUI 的轻量级 js 封装
点击进入 GitHub
首页 技术导航 在线工具 技术文章 教程资源 AI工具集 前端库/框架 实用工具箱

Copyright © 2018 Web前端开发网提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主。All Rights Reserved. 网站备案号:蜀ICP备13022973号

手机预览