uniapp结合movable-area与movable-view实现拖拽功能

最新推荐文章于 2025-10-26 16:32:33 发布

原创

最新推荐文章于 2025-10-26 16:32:33 发布 · 849 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

前言

因为公司业务开发需要拖拽功能。

ps：该功能只能针对高度一致的，如果高度不一致需要另外二开

演示

开始

<template>
  <view style="height: 100%;">
    <movable-area :style="{'width': '100%', 'height': allHeight + 'px'}">
      <movable-view
        v-for="(item, index) in list"
        :key="item.id"
        :x="0"
        :y="item.y"
		:style="{'height': itemHeight + 'px', 'width': '100%',}"
        direction="all"
        @touchstart="handleDragStart(index)"
	   @change="handleMoving(index, $event)"
	   @touchend="handleDragEnd"
        class="movable-view"
      >
        <!-- 这里可以放置步骤的详细内容 -->
        <view style="background-color: aqua; padding: 20rpx 0;">{
  
  { item.desc }}</view>
      </movable-view>
    </movable-area>
  </view>
</template>

<scrip