Vue-draggable-div NPM

vue-draggable-div

说明

vue可拖拽可伸缩的组件，目前只是借鉴，详见以下传送门

安装

npm install vue-draggable-div

使用

<script>
import VueDraggableDiv from 'vue-draggable-div'
    ...
components: {VueDraggableDiv}

可选属性及触发事件

Props：

draggable
descibe: 是否可拖拽
type: Boolean
require: false
default: true
```
  <vue-draggable-div :draggable="false">
```
resizable
descibe: 是否可缩放
type: Boolean
require: false
default: true
```
  <vue-draggable-div :resizable="false">
```
w
descibe: 宽度
type: Number
require: false
default: 200
```
  <vue-draggable-div :w="200">
```
h
descibe: 高度
type: Number
require: false
default: 200
```
  <vue-draggable-div :h="200">
```
parent
descibe: 限制在父元素内移动
type: Boolean
require: false
default: false
```
  <vue-draggable-div :parent="true">
```
dragHandle
descibe: 可拖拽的元素。定义应该用于拖动组件的选择器。绑定的值为元素的class选择器。
type: String
require: false
default: 默认整个组件。
```
  <vue-draggable-div drag-handle=".draggable">
    <span class="undraggable">不可拖拽</span>
    <span class="draggable">可拖拽</span>
  </vue-draggable-div>
```

Events：

activated

descibe: 拖拽触发事件
type: Boolean
params: -
require: false

  <vue-draggable-div @activated="activeFunc">
  </vue-draggable-div>
  ...
  <script>
    methods: {
      activeFunc() {}
    }
  </script>

resizing

descibe: 拖拽触发事件
type: Boolean
params: (left, top, width, height)
require: false

  <vue-draggable-div @resizing="resizingFunc">
  </vue-draggable-div>
  ...
  <script>
    methods: {
      resizingFunc() {}
    }
  </script>

例子

  <template>
    <div>
      <vue-draggable-div>
        <span>你拽我试试！！！</span>
      </vue-draggable-div>
    </div>
  </template>

  <script>
  import VueDraggableDiv from 'vue-draggable-div'
  export default {
    name: 'Test',
    data() {
      return {}
    },
    components: {
      VueDraggableDiv
    }
  }
  </script>