uni-app 贴边拖拽插件

一种思路是通过改变fixed的定位实现

在uni-app中实现贴边拖拽插件，可以利用touch事件来实现拖拽效果，并结合边界检测来处理贴边逻辑。以下是一个简单的代码示例，展示了如何在uni-app中实现一个基本的贴边拖拽功能。

首先，创建一个新的uni-app项目，并在页面中实现拖拽组件。

1. 创建页面组件

在pages/index/index.vue中编写以下代码：

<template>
  <view class="container">
    <view
      class="draggable"
      :style="{ top: position.y + 'px', left: position.x + 'px' }"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      拖拽我
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      position: { x: 50, y: 50 },
      start: { x: 0, y: 0 },
      dragging: false,
      containerWidth: 0,
      containerHeight: 0,
      elementWidth: 100,
      elementHeight: 100,
    };
  },
  onLoad() {
    this.containerWidth = uni.getSystemInfoSync().windowWidth;
    this.containerHeight = uni.getSystemInfoSync().windowHeight;
  },
  methods: {
    handleTouchStart(e) {
      this.start.x = e.touches[0].clientX - this.position.x;
      this.start.y = e.touches[0].clientY - this.position.y;
      this.dragging = true;
    },
    handleTouchMove(e) {
      if (!this.dragging) return;
      let x = e.touches[0].clientX - this.start.x;
      let y = e.touches[0].clientY - this.start.y;

      // 贴边逻辑
      x = Math.max(0, Math.min(this.containerWidth - this.elementWidth, x));
      y = Math.max(0, Math.min(this.containerHeight - this.elementHeight, y));

      this.position = { x, y };
    },
    handleTouchEnd() {
      this.dragging = false;
    },
  },
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}
.draggable {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
</style>

2. 解释代码

• 模板部分：包含一个可拖拽的view，初始位置通过position数据绑定。
• 脚本部分：
  • data：定义拖拽组件的位置、起始点、拖拽状态以及容器和元素的尺寸。
  • onLoad：获取系统窗口的宽度和高度。
  • methods：包含touchstart、touchmove和touchend事件处理函数，用于实现拖拽逻辑和贴边检测。
• 样式部分：定义了容器和拖拽元素的样式。

这个示例展示了如何在uni-app中实现一个基本的贴边拖拽功能。你可以根据实际需求进一步扩展和优化代码，例如添加动画效果、处理多点触控等。