ABoyCDogvue-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>打包
打包使用命令 npm run build-bundle
代码详见
See git.