更新记录

1.0.0（2025-12-01） 下载此版本

• 初始版本
• 实现基础拖拽功能
• 支持边界约束
• 添加回弹效果

平台兼容性

DragEl 拖拽组件

简介

DragEl 是一个支持多端（H5 和小程序）的拖拽组件，允许用户通过触摸或鼠标拖拽元素，并支持边界约束和回弹效果。

功能特性

• 支持触摸和鼠标拖拽
• 可设置拖拽边界
• 支持回弹效果
• 兼容 H5 和小程序环境
• 可自定义初始位置

使用方法

安装

将 DragEl 组件复制到您的项目中。

引入

<import src="@/components/DragEl/index.vue" />

基本用法

<template>
  <view class="container">
    <DragEl 
      :initial-position="{ x: 100, y: 100 }" 
      :boundary="{ minX: 0, maxX: 300, minY: 0, maxY: 500 }"
      :enable-bounce="true"
      :bounce-threshold="0.3"
      :init-size="{ width: 100, height: 100 }"
      @start="Start"
      @move="Move"
      @end="End"
      @bounce=""
    >
      <view class="draggable-content">拖拽我</view>
    </DragEl>
  </view>
</template>

<script setup>
import DragEl from '@/components/DragEl/index.vue'

const Start = (position) => {
  console.log('拖拽开始', position)
}

const Move = (position) => {
  console.log('拖拽中', position)
}

const End = (position) => {
  console.log('拖拽结束', position)
}

const  = (position, direction) => {
  console.log('回弹', position, direction)
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
}

.draggable-content {
  width: 100px;
  height: 100px;
  background-color: #007aff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
</style>

属性 (Props)

事件 (Events)

方法

插槽

注意事项

1. 在小程序环境中，需要传入 initSize 属性来正确计算边界。
2. 如果未指定边界，组件会尝试自动计算父元素的尺寸。
3. 回弹效果仅在启用且设置了有效边界时生效。

更新日志

v1.0.0

• 初始版本
• 实现基础拖拽功能
• 支持边界约束
• 添加回弹效果