# 极简JS拖拽

**Repository Path**: leichenqing/zxx-drag

## Basic Information

- **Project Name**: 极简JS拖拽
- **Description**: 兼容 IE 和移动端的极简拖拽效果实现，全局暴露，即插即用
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 5
- **Created**: 2022-05-17
- **Last Updated**: 2022-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 极简 JS 拖拽

### 介绍
兼容 IE9+ 和移动端的极简拖拽效果实现，全局暴露，即插即用，支持边界限制判断。

### 演示

演示地址：<a href="https://zhangxinxu.gitee.io/zxx-drag/demo.html">https://zhangxinxu.gitee.io/zxx-drag/demo.html</a>

### 语法

```js
zxxDrag (eleBar, options);
```

### 参数说明

<dl>
    <dt>eleBar</dt>
    <dd>Element，必需，表示可以触发拖拽的元素。</dd>
    <dt>options</dt>
    <dd>Object，可选参数。</dd>
</dl>

#### 可选参数

options 为可选参数，支持下面这些：

<dl>
    <dt>target</dt>
    <dd>Element，表示移动的目标元素，默认就是 eleBar 元素。</dd>
    <dt>bounding</dt>
    <dd>Object | Element，拖拽范围，如果参数是对象，需要是下面这样的格式：
<pre>
{
    left: 0,
    top: 0,
    bottom: 0,
    right: 0
}
</pre>
其中，无论是 left, right 还是 top, bottom 值均是相对于浏览器窗口左边缘和上边缘计算的。

如果参数是 DOM 元素，则被限制的拖拽范围就是这个元素。

默认值是 window，表示限制范围是整个浏览器窗口。
</dd>
    <dt>edgeLock</dt>
    <dd>Boolean，表示是否开启边缘范围限制。</dd>
    <dt>onMove</dt>
    <dd>Function，拖拽进行中触发，支持两个参数，分别是拖拽目标元素的 left 和 top 定位值。</dd>
    <dt>onEnd</dt>
    <dd>Function，拖拽结束的时候触发。</dd>
</dl>

#### 使用说明

1. 引入资源
```html
<script src="./zxxDrag.js"></script>
```
2. 执行绑定
```html
<script>
    zxxDrag(bar, {
        target: box
    });
</script>
```