vueUse プラグイン -- useDraggable の使用法とケース (vue3)

vue使用アドレス:

useDraggable は要素をドラッグ可能にします

公式デモに興味がある場合は、VueUse 公式 Web サイトにアクセスしてご覧ください。

<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'
 
const el = ref<HTMLElement | null>(null)
 
// `style` will be a helper computed for `left: ?px; top: ?px;`
const { x, y, style } = useDraggable(el, {
  initialValue: { x: 40, y: 40 },
})
</script>
 
<template>
  <div ref="el" :style="style" style="position: fixed">
    Drag me! I am at {
   
   {x}}, {
   
   {y}}
  </div>
</template>

useDraggable は 2 つのパラメータを受け取り、target はターゲット要素をドラッグします。optionsはオプションのパラメーターです。つまり、渡すかどうかを指定できます。次のコードはuseDraggable のソースコードの一部であり、 optionsパラメーターが初期値、ドラッグメソッド、リスニングイベントなどを含むオブジェクトであることがわかります。興味があれば、ソースコードをチェックしてみてください。

interface UseDraggableOptions {
    /**
     * Only start the dragging when click on the element directly
     *
     * @default false
     */
    exact?: MaybeRef<boolean>;
    /**
     * Prevent events defaults
     *
     * @default false
     */
    preventDefault?: MaybeRef<boolean>;
    /**
     * Prevent events propagation
     *
     * @default false
     */
    stopPropagation?: MaybeRef<boolean>;
    /**
     * Element to attach `pointermove` and `pointerup` events to.
     *
     * @default window
     */
    draggingElement?: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>;
    /**
     * Pointer types that listen to.
     *
     * @default ['mouse', 'touch', 'pen']
     */
    pointerTypes?: PointerType[];
    /**
     * Initial position of the element.
     *
     * @default { x: 0, y: 0}
     */
    initialValue?: MaybeRef<Position>;
    /**
     * Callback when the dragging starts. Return `false` to prevent dragging.
     */
    onStart?: (position: Position, event: PointerEvent) => void | false;
    /**
     * Callback during dragging.
     */
    onMove?: (position: Position, event: PointerEvent) => void;
    /**
     * Callback when dragging end.
     */
    onEnd?: (position: Position, event: PointerEvent) => void;
}
 
declare function useDraggable(target: MaybeRef<HTMLElement | SVGElement | null | undefined>, options?: UseDraggableOptions): {
    position: Ref<Position>;
    isDragging: vue_demi.ComputedRef<boolean>;
    style: vue_demi.ComputedRef<string>;
    x: Ref<number>;
    y: Ref<number>;
};

このツールを見たときに最初に考えたのは、グローバル設定を自由に配置してドラッグできるウィジェットに変えることでした。これにより、単純なページにデスクトップアプリのようなタッチが与えられます。もっと背が高く見えます。同様に、ポップアップボックスやダイアログボックスの自由なドラッグアンドドロップなどを実装することもできます。想像力を自由に働かせてください。とにかく、このツールを使用すると、記述するコードが大幅に減り、バグのリスクが軽減されます。何といっても、これは Vue の公式ツールです。さて、早速、以下の例を見てみましょう。

<template>
  <div ref="settingRef" :style="style" style="position: fixed">
    <el-icon size="40px"><i-ep-setting /></el-icon>
  </div>
</template>
 
<script lang="ts">
import {useWindowSize, useDraggable, Position} from "@vueuse/core";
export default defineComponent({
  setup() {
    const settingRef = ref<HTMLElement | null>(null)
 
    const { width, height } = useWindowSize()
 
    let { style } = useDraggable(settingRef, {
      initialValue: { x: width.value - 40, y: height.value / 2 },
      onMove: (position: Position) => {
        if (position.x > width.value - 40) {
          position.x = width.value - 40
        }
        if (position.x < 0) {
          position.x = 0
        }
        if (position.y > height.value - 40) {
          position.y = height.value - 40
        }
        if (position.y < 0) {
          position.y = 0
        }
      }
    })
 
    return {
      settingRef,
      style,
    }
  }
})
</script>

興味のある友人は、このデモを実行して試してみることができます。コードでは、use window sizeを使用してウィンドウサイズを取得し、 onMoveメソッドを監視しています。ドラッグされた要素はウィンドウ範囲内でのみドラッグできます。-40 の部分は、要素自体のサイズを減算します。これはウィンドウサイズの変更を行わない単純なデモなので、興味のある友人は自分で拡張できます。

vueUse プラグイン -- useDraggable の使用法とケース (vue3)

Guess you like