Tulip
On this page

Draggable 拖拽 ​

可拖拽元素

基本用法 ​

使用组件包裹元素

vue
<template>
  <tu-draggable
    class="drag-demo"
    :initial-value="{ x: 200, y: 200 }"
    v-slot="{ x, y }">
    拖拽 1 号<br>x：{{ x }}<br>y：{{ y }}
  </tu-draggable>
</template>

<style scoped>
.drag-demo {
  width: 240px;
  padding: 8px 16px;
  background-color: #fff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
}
</style>

组合式 API ​

也可以使用 useDraggableBase 添加拖拽

vue
<template>
  <div ref="drag" class="drag-demo" :style="style">
    拖拽 2 号<br>x：{{ x }}<br>y：{{ y }}
  </div>
</template>

<script setup lang="ts">
import { useDraggable } from '../../../src/index'
import { ref } from 'vue'

const drag = ref<HTMLElement | null>(null)
const { x, y, style } = useDraggable(drag, { initialValue: { x: 100, y: 100 } })
</script>

<style>
.drag-demo {
  position: fixed;
  touch-action: none;
  user-select: none;
  cursor: move;
  z-index: 24;
  width: 240px;
  padding: 8px 16px;
  background-color: #fff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
}
</style>
拖拽 1 号
x：200
y：200
拖拽 2 号
x：100
y：100

Draggable 属性 & useDraggable Option 参数 ​

名称说明类型默认值
initial-value初始位置值{ x: number, y: number }{ x: 0, y: 0 }
dragging-element附加 'pointermove' 和 'pointerup' 事件的元素Element | WindowWindow