Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vue-draggable-div

ABoyCDog7MIT0.1.4

vue可拖拽可伸缩的组件

vue, component, dragabble, resizable

readme

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>

打包

打包使用命令 npm run build-bundle

代码详见

See git.

参考 传送门

changelog

Changelog

All notable changes to vue-draggable-div will be documented in this file

2.2.0 - 2020-05-03

  • auto height and width
  • onDrag callback
  • onResize callback

2.0.0 - 2019-09-09

  • released 2.0.0

1.7.0 - 2018-04-04

  • add touch events

1.6.0 - 2018-01-16

  • add dragHandle and dragCancel props

1.5.0 - 2017-09-19

  • implement :z prop and watcher

1.4.0 - 2017-09-17

  • add active synched prop

1.3.0 - 2017-09-11

  • add resizing and dragging css classes

1.2.0 - 2017-07-17

  • add maximize prop

1.1.0 - 2017-07-03

  • add dragstop and resizestop events

1.0.0 - 2017-06-08

  • Initial release