安装

确保 Vue 版本 >= 3.x

npm i v-drag-move -S
# or
yarn v-drag-move

Demo

Click Try

<template>
  <DragMove
    move-selector=".container"
    drag-selector=".container .header"
  >
    <div class="container">
      <header class="header"></header>
    </div>
  </DragMove>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import DragMove from 'v-drag-move'

export default defineComponent({
  name: 'App',
  components: {
    DragMove
  }
})
</script>

<style>
.container {
  width: 300px;
  height: 500px;
  margin: 0 auto;
  border: 1px solid red;
  border-radius: 5px;
}

.header {
  height: 35px;
  border-bottom: 1px solid #ccc;
}
</style>

Attributes

| 参数 | 描述 |类型 | 默认值 | | ------------- |------------------- |-------------- |------ | | active | 是否处于激活状态, 对于类似 Modal 组件务必设置 | boolean | false | | move-selector | 容器选择器, 整个容器能被移动 | string | -- | | drag-selector | 拖动选择器, 拖动部位, 默认容器部位 |string| -- |

LICENSE

MIT