# zhkt-drage

>

## Build Setup

```bash
# install dependencies
npm install zhkt-drage --save
yarn add zhkt-drage
```

## 如何使用

```
<template>
  <div id="app">
    <Drage :left="200" :top="200" @blur="handleBlur" @focus="handleFocus">
      <div style="width: 200px; height: 200px; background: red"></div>
    </Drage>
  </div>
</template>

<script>
import Drage from "zhkt-drage"; // 引入
export default {
  data() {
    return {};
  },
  components: {
    Drage,
  },
  methods: {
    handleFocus(data) {
      console.log(data, "handleFocus");
    },
    handleBlur(data) {
      console.log(data, "handleBlur");
    },
  },
};
</script>
```

## Props

zIndex  
 Type: Number, String,  
 Default: 1  
 zIndex 表示拖拽的时候该元素的层级

left  
 Type: Number  
 Default: 0  
 left 表示该可拖拽元素页面渲染时距离最近定位父元素左边的位置

top  
 Type: Number  
 Default: 0  
 top 表示该可拖拽元素页面渲染时距离最近定位父元素上边的位置

width  
 Type: Number  
 Default: 0  
 width 表示该可拖拽元素在页面渲染时的宽度

height  
 Type: Number  
 Default: 0  
 height 表示该可拖拽元素在页面渲染时的高度

## Events

out,over,focus,blur  
 所有事件都会接受一个对象，对象里面包含的是当前可拖拽元素唯一标示，距离最近定位父元素左边距离和顶部距离，以及该拖拽元素的高度和宽度

```
{
       width: this.baseWidth,
       height: this.baseHeight,
       left: this.baseLeft,
       top: this.baseTop,
     }
```

out  
 当鼠标指针从元素上移开时触发该事件

over  
 鼠标指针位于元素上方时触发该事件

focus
当鼠标指针移动到元素上方,并按下鼠标左键时触发该事件，该事件触发之后，表示元素可以跟着鼠标移动

blur  
 当鼠标指针移动到元素上方,并松开鼠标左键时触发，表示已经拖拽完成