当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

selecto

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者巩子实

操作系统跨平台

开源组织无

适用人群未知

软件概览

Selecto.js

Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Demo / API / Main Project

⚙️ Installation

npm

$ npm install selecto

scripts

<script src="//daybrush.com/selecto/release/latest/dist/selecto.min.js"></script>

�� How to use

import Selecto from "selecto";

const selecto = new Selecto({
    // The container to add a selection element
    container: document.body,
    // Selecto's root container (No transformed container. (default: null)
    rootContainer: null,
    // 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");
    });
});

Do you want to select accurately?

Since selecto basically checks using getBoundingClientRect, it is not accurate if the object is rotated or distorted.

If you want to check accurately, use getElementRect option with the following code

See Example

import Selecto from "selecto";
import { getElementInfo } from "moveable"; // (13kb function) if you use react, use react-moveable

const selecto = new Selecto({
    ...,
    // (target: HTMLElement | SVGElement ) => { pos1: number[], pos2: number[], pos3: number[], pos4: number[] }
    // pos1: left top
    // pos2: right top
    // pos3: left bottom
    // pos4: right bottom
    getElementRect: getElementInfo,
});

�� Packages

Package Name	Version	Description
react-selecto		A React Selecto Component that allows you to select elements in the drag area using the mouse or touch.
ngx-selecto		An Angular Selecto Component that allows you to select elements in the drag area using the mouse or touch.
vue-selecto		A Vue Selecto Component that allows you to select elements in the drag area using the mouse or touch.
preact-selecto		A Preact Selecto Component that allows you to select elements in the drag area using the mouse or touch.
svelte-selecto		A Svelte Selecto Component that allows you to select elements in the drag area using the mouse or touch.
lit-selecto		A Lit Selecto Component that allows you to select elements in the drag area using the mouse or touch.

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

�� Contributing

If you have any questions or requests or want to contribute to selecto or other packages, please write the issue or give me a Pull Request freely.

�� Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

�� License

This project is MIT licensed.

MIT License

Copyright (c) 2020 Daybrush

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

使用案例

select与阻塞/非阻塞IO（深入理解select函数）

转载from：select与阻塞/非阻塞IO_yxtxiaotian的专栏-CSDN博客_select阻塞目录 1、引言(select应用场景) 2、select意义 3、select 说明 4、 select使用例子 5、浅谈select阻塞机制 1、引言(select应用场景) 很多人把【阻塞/非阻塞socket】和select联系在一起，需要指明select函数与【阻塞/非阻塞socket
MyBatis查询报错：Expected one result (or null) to be returned by selectOne(), but found: 2

MyBatis在查询数据时，查询涉及到多张表，且查询的对象存在集合的属性时，如下查询会报错：Expected one result (or null) to be returned by selectOne(), but found: 2 <resultMap id="classesMap" type="cn.jam.entity.Classes"> <id column="c.id" p
select+NONBLOCK

补充一点：只有在使用epoll ET(Edge Trigger)模式的时候，才需要关注数据是否读取完毕了。使用select或者epoll的LT模式，其实根本不用关注数据是否读完了，select/epoll检测到有数据可读去读就OK了。这里有两种做法： 1. 针对TCP，调用recv方法，根据recv方法的返回值，如果返回值小于我们指定的recv buffer的大小，则认为数据已经全部接收
jquery操作select(option)的取值,设置和选中

每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。比如 <select class="selector"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option va
遇到Expected one result (or null) to be returned by selectOne(), but found: 2怎么解决

在编程过程过，运行后会出现Expected one result (or null) to be returned by selectOne(), but found: 2的错误其意思为查询的结果应该是一条，但实际查询的结果是多条或是空的这时应该去看下数据库里面的记录是不是只有一条记录
I/O多路复用之select

I/O复用使得程序能同时监听多个文件描述符，这对提高程序的性能至关重要。通常，网络程序在下列的情况下需要使用I/O复用技术：客户端程序要同时处理多个socket。客户端程序要同时处理用户输入和网络连接。 TCP服务器要同时处理监听socket和连接socket。这是I/O多路复用使用最多的场合。服务器要同时处理TCP请求和UDP请求。服务器要同时监听多个端口，或者处理多种服务。需要指出的
Windows套接字I/O模型（2） -- Select模型

一、Select模型介绍套接字I/O Select模型的“中心思想”便是利用select函数，实现对I/O的管理。利用select函数判断套接字（一个或多个）上是否存在数据，或者能否向套接字写入数据。它也是同步的，也会阻塞。但和套接字I/O阻塞模型不同的是，Select模型可以同时管理多个Socket。 select函数原型： int select ( int nfds,
Ｉ/Ｏ多路复用(select)

在之前写过一篇五种I/O模型，感兴趣的可以去看一下，今天主要讲其中的一种，那就是I/O多路复用。因为I/O多路复用可以使一个进程同时处理多个连接。这对提高程序的性能至关重要。对于IO复用的概念与理解在上文说的挺清楚了。本文主要说实现IO复用的系统调用。　　在linux下，实现IO复用的系统调用主要有三个：select、poll 和 epoll，下面我们将对其进行逐一讲解。 ##select 　　
redis I/O多路复用（select，poll，epoll）

redis 为啥这么快？ 1，redis所有的数据是在内存中，所有的操作都是内存级别的运算。 2，redis是单线程，避免了多线程的切换和加锁消耗。 3，redis使用epoll作为非阻塞I/O多路复用，多路复用监听多个socket，并将socket放入队列中，每次从队列取一个socket交给事件分配器，事件分配器再把socket交给事件处理器，事件处理器的所有操作都是内存级别的，处理一个事件只需

selecto

Selecto.js

⚙️ Installation

npm

scripts

�� How to use

Do you want to select accurately?

�� Packages

⭐️ Show Your Support

�� Contributing

�� Bug Report

�� License

同类工具

相关阅读

相关文章

相关问答

相关文档