Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/liuyib/mydrag

🐾 Drag any element on mobile device
https://github.com/liuyib/mydrag

Last synced: 23 days ago
JSON representation

🐾 Drag any element on mobile device

Host: GitHub
URL: https://github.com/liuyib/mydrag
Owner: liuyib
License: mit
Created: 2020-03-14T09:53:38.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2020-07-20T01:40:20.000Z (over 4 years ago)
Last Synced: 2024-04-14T09:58:52.280Z (7 months ago)
Language: JavaScript
Homepage: https://liuyib.github.io/mydrag/demo/
Size: 280 KB
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

Mydrag.js

🐾 拖拽移动设备上的任意元素

[简体中文](https://github.com/liuyib/mydrag/blob/master/README.md) | [English](https://github.com/liuyib/mydrag/blob/master/README_en-US.md)

## :cloud: 安装

使用 npm:

```bash
$ npm install mydrag --save
```

使用 yarn:

```bash
$ yarn add mydrag
```

使用 bower:

```bash
$ bower install liuyib/mydrag --save
```

使用 jsDelivr CDN:

```html

```

使用 unpkg CDN:

```html

```

## :package: 用法

首先，引入 `mydrag.js`：

```js
import Mydrag from 'mydrag'; // ES6
// 或
const Mydrag = require('Mydrag'); // CommonJS
// 或

// 或

```

然后，准备一个元素：

```html

```

最后，使用：

```js
// 用例 1（使用 new）
new Mydrag('#drag');

// 用例 2（不用 new）
Mydrag('#drag');

// 用例 3（传递参数）
Mydrag('#drag', {
initX: 100, // 100 px
initY: 100 // 100 px
});
```

## :memo: 文档

### `Mydrag(selector, options)`

- **selector** (string)：元素的 CSS 选择器 (**必须**)
- **options** (object)
- **options.adsorb** (boolean)：是否自动吸附边缘（**可选**。默认：`true`）
- **options.rate** (number)：吸附动画的缓冲速率（**可选**。默认：`5`）
> 数值越大，缓冲动画的速度减小越慢。
- **options.initX** (number)：初始 `x` 坐标（**可选**。默认：`0`，单位：`px`）
- **options.initY** (number)：初始 `y` 坐标（**可选**。默认：`0`，单位：`px`）
- **options.gap** (number)：元素距离边缘的间隙（**可选**。默认：`10`，单位：`px`）

## :bulb: 二次开发

安装所需依赖：

```bash
$ npm install
```

修改代码之前，请执行：

```bash
$ npm run dev
```

> 该指令的作用是：自动监听代码变动，并打包生成 `mydrag.min.js`。

或者不执行 `npm run dev`，当修改完代码时，执行：

```bash
$ npm run build
```

编写测试之前，请执行：

```bash
$ npm run test
```

查看测试覆盖率，请在浏览器中运行 `coverage/lcov-report` 目录下的 `index.html` 文件。

> 该文件和目录需要执行 `npm run test` 才会生成。

## :handshake: 开源协议