mydrag

Mydrag.js

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

简体中文 | English

:cloud: 安装

使用 npm:

$ npm install mydrag --save

使用 yarn:

$ yarn add mydrag

使用 bower:

$ bower install liuyib/mydrag --save

使用 jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/mydrag/dist/mydrag.min.js"></script>

使用 unpkg CDN:

<script src="https://unpkg.com/mydrag/dist/mydrag.min.js"></script>

:package: 用法

首先，引入 mydrag.js：

import Mydrag from 'mydrag';      // ES6
// 或
const Mydrag = require('Mydrag'); // CommonJS
// 或
<script src="https://cdn.jsdelivr.net/npm/mydrag/dist/mydrag.min.js"></script>
// 或
<script src="https://unpkg.com/mydrag/dist/mydrag.min.js"></script>

然后，准备一个元素：

<div id="drag"></div>

最后，使用：

// 用例 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: 二次开发

安装所需依赖：

$ npm install

修改代码之前，请执行：

$ npm run dev

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

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

$ npm run build

编写测试之前，请执行：

$ npm run test

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

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

:handshake: 开源协议

MIT Copyright (c) 2020 liuyib