1.0.0-beta.2 • Published 5 months ago

@xiaohaih/drag v1.0.0-beta.2

Weekly downloads
-
License
-
Repository
-
Last release
5 months ago

拖拽插件

  • 支持 vue2.7.* vue3

在线demo

使用示例

  1. 指令形式
<template>
    <div>
        <div v-draggable class="box absolute cursor-move">
            拖拽我
        </div>
        <div class="wrap relative size-600px">
            <div v-draggable.overflow="'.handle'" class="box absolute left-300px w-100px h-100px">
                <div class="handle cursor-move">
                    拖拽我
                </div>
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
                <div>内容4</div>
            </div>
        </div>
        <div v-draggable="draggableOption" class="wrap">
            <div class="box absolute left-50px top-800px">
                <div class="handle cursor-move">
                    拖拽我
                </div>
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
                <div>内容4</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { draggable as vDraggable } from '@xiaohaih/drag';

const draggableOption = {
    target: '.box',
    handle: '.handle',
};
</script>
  1. 通过函数调用
import { drag } from '@xiaohaih/drag';

drag({ target: document.querySelector('.box') });
drag({
    target: document.querySelectorAll('.box')[1],
    handle: document.querySelectorAll('.box')[1].querySelector('.handle'),
    overflow: true,
});

API

  • @param {object} option 传递的参数
  • @param {HTMLElement | ((el: HTMLElement) => HTMLElement) | string} option.target 拖拽目标元素
  • @param {HTMLElement | ((el: HTMLElement) => HTMLElement) | string} option.handle 拖拽句柄()
  • @param {boolean} option.disabled 是否禁用
  • @param {boolean} option.overflow 是否可以拖拽溢出(超出父级元素)
  • @param {boolean} option.side 是否强制靠边
  • @param {boolean} option.left 开启强制靠边时, 是否强制显示在左侧
  • @param {boolean} option.right 开启强制靠边时, 是否强制显示在右侧
  • @param {(axis: Record<'x' | 'y', number>, axisPercent: Record<'x' | 'y', number>) => void} option.siteUpdated 拖拽位置更新时触发
0.1.0

10 months ago

1.0.0-beta

6 months ago

1.0.0-beta.2

5 months ago

1.0.0-beta.1

5 months ago

0.0.2

10 months ago

0.0.1

10 months ago