uni-app图片拖拽

### 实现 uni-app 中的图片拖拽功能

为了在 uni-app 中实现图片拖拽功能，可以利用 HTML5 的原生拖放 API 和 Vue.js 的双向数据绑定特性。下面是一个简单的例子展示如何创建可拖动的图片并处理其位置变化。

#### 创建一个支持触摸移动的图像组件

首先，在 `pages/index/index.vue` 文件中定义一个新的页面布局：

<template>
  <view class="container">
    <!-- 定义一个可拖拽的 image 组件 -->
    <image 
      :src="imgSrc"
      class="draggable-image"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      :style="{ transform: 'translate(' + position.x + 'px, ' + position.y + 'px)' }"/>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: '/static/logo.png', // 图片路径
      startX: 0,
      startY: 0,
      position: { x: 0, y: 0 }
    };
  },
  
  methods: {
    handleTouchStart(event) {
      const touch = event.touches[0];
      this.startX = touch.clientX;
      this.startY = touch.clientY;
    },

    handleTouchMove(event) {
      if (event.touches.length !== 1) return;

      let touch = event.touches[0];

      // 更新坐标差值
      this.position.x += touch.clientX - this.startX;
      this.position.y += touch.clientY - this.startY;

      // 记录当前触控点的位置作为下次计算起点
      this.startX = touch.clientX;
      this.startY = touch.clientY;
      
      // 阻止默认行为防止滚动
      event.preventDefault();
    },

    handleTouchEnd() {}
  }
};
</script>

<style scoped>
.draggable-image {
  width: 100px;
  height: auto;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
</style>

此代码片段展示了如何通过监听触摸事件 (`@touchstart`, `@touchmove`, `@touchend`) 来控制图片的位置变换[^3]。当用户按下屏幕时记录初始接触点；随着手指滑动更新图片的新位置；最后释放手势结束操作。这里还加入了 CSS 样式使界面更加美观，并确保图片能够响应用户的交互动作。