-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
demo.vue
92 lines (86 loc) · 2.47 KB
/
demo.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<script setup lang="ts">
import { ref } from 'vue'
import { isClient } from '@vueuse/shared'
import { useDraggable } from '@vueuse/core'
import { UseDraggable as Draggable } from './component'
const el = ref<HTMLElement | null>(null)
const handle = ref<HTMLElement | null>(null)
const innerWidth = isClient ? window.innerWidth : 200
const disabled = ref(false)
const { x, y, style } = useDraggable(el, {
initialValue: { x: innerWidth / 4.2, y: 80 },
preventDefault: true,
disabled,
})
</script>
<template>
<div>
<div class="text-xs">
<label class="checkbox">
<input
:checked="disabled" type="checkbox" name="enabled"
@input="($event.target as HTMLInputElement)!.checked ? disabled = true : disabled = false "
>
<span>Disabled drag and drop</span>
</label>
</div>
<p class="italic op50 text-center">
Check the floating boxes
</p>
<div
ref="el"
p="x-4 y-2"
border="~ gray-800/30 rounded"
shadow="~ hover:lg"
class="fixed bg-$vp-c-bg select-none cursor-move z-31"
style="touch-action:none;"
:style="style"
>
👋 Drag me!
<div class="text-sm opacity-50">
I am at {{ Math.round(x) }}, {{ Math.round(y) }}
</div>
</div>
<Draggable
v-slot="{ x, y }"
p="x-4 y-2"
border="~ gray-400/30 rounded"
shadow="~ hover:lg"
class="fixed bg-$vp-c-bg select-none cursor-move z-31"
:initial-value="{ x: innerWidth / 3.9, y: 150 }"
prevent-default
storage-key="vueuse-draggable-pos"
storage-type="session"
:disabled="disabled"
>
Renderless component
<div class="text-xs opacity-50">
Position persisted in sessionStorage
</div>
<div class="text-sm opacity-50">
{{ Math.round(x) }}, {{ Math.round(y) }}
</div>
</Draggable>
<Draggable
v-slot="{ x, y }"
p="x-4 y-2"
border="~ gray-400/30 rounded"
shadow="~ hover:lg"
class="fixed bg-$vp-c-bg select-none z-31"
:initial-value="{ x: innerWidth / 3.6, y: 240 }"
:prevent-default="true"
:handle="handle"
:disabled="disabled"
>
<div ref="handle" class="cursor-move">
👋 Drag here!
</div>
<div class="text-xs opacity-50">
Handle that triggers the drag event
</div>
<div class="text-sm opacity-50">
I am at {{ Math.round(x) }}, {{ Math.round(y) }}
</div>
</Draggable>
</div>
</template>