vue.js 实现上下拖拽div 容器上方，动态改变容器高度

Vue.js 中实现拖拽 div 容器并动态调整其高度，通常需要结合 HTML5 的 drag and drop API 和 Vue 的数据绑定特性来完成。以下是一个简单的步骤说明：

1. 首先，在HTML结构中设置可以被拖动的 div，并为其添加 `draggable` 属性：

<div v-for="(item, index) in draggableItems" :key="index" ref="draggableDivs" draggable="true" @dragstart="onDragStart(index)" @dragover.prevent @drop="onDrop(index)">
  <!-- 内容 -->
</div>

2. 在 Vue 组件中，定义 `draggableItems` 数据数组存储可拖拽的 div 内容和初始高度：

data() {
  return {
    draggableItems: [
      { content: 'Item 1', height: 100 },
      { content: 'Item 2', height: 200 }
    ]
  };
},

3. 实现拖放事件处理函数：
- `onDragStart`: 记录开始拖动时的索引：

methods: {
  onDragStart(index) {
    this.startIndex = index;
  }
},

- `onDrop`: 在释放鼠标时更新 div 容器高度：

methods: {
  onDrop(index) {
    const currentHeightSum = this.draggableItems.reduce((sum, item) => sum + item.height, 0);
    const currentIndexHeight = this.draggableItems[index].height;
    
    // 确保目标位置不是自身
    if (index !== this.startIndex) {
      this.draggableItems[this.startIndex].height = 0; // 移除开始拖动的元素高度
      this.draggableItems[index].height = currentHeightSum - currentIndexHeight; // 更新目标元素高度
    }

    // 如果所有元素都放置在上面，那么顶部容器高度为0
    if (this.draggableItems.every(item => item.height === 0)) {
      this.upperContainerHeight = 0;
    } else {
      this.upperContainerHeight = currentHeightSum;
    }
  }
},

4. 初始化顶部容器的高度，可以根据需求计算当前高度：

computed: {
  upperContainerHeight() {
    return this.draggableItems.reduce((sum, item) => sum + item.height, 0);
  }
}

5. 最后，在模板中可能需要一个额外的 `v-bind:class` 来控制容器显示状态，比如：

<div class="upper-container" style="--height: {{ upperContainerHeight }}px;"></div>

通过以上步骤，当用户拖动 div 时，会动态改变容器的总高度。