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

前言

上篇我们写了，固定高度的拖拽，这篇我们将进行不固定高度的拖拽模块编写完成。

开始

一、初始化

我们在list数组里面增加一个data的动态数组，这样可以动态改变元素的高度。

当前元素y = 上一个元素的高度

<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': item.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; margin: 10rpx 0;">
			<view v-for="(d_item, d_key) in item['data']" :key="d_k