JavaScript onDragover 事件处理函数：实现拖放组件添加功能

这段代码是一个拖动事件的回调函数 onDragover(event)，当拖动元素在指定区域内移动时，会触发该函数。函数中首先调用了 event.preventDefault() 方法，阻止默认的拖动行为，防止浏览器默认的拖放行为。

接下来，代码根据拖动的位置计算出要添加组件的索引值。它通过获取页面预览区域距离顶部的距离 (viewWrapTop) 和拖动元素距离预览区顶部距离 (dropTop)，以及组件在预览区域的布局信息 (componentsTopList)，确定要将组件插入的位置。

最后，代码在页面预览区域生成预添加组件，并显示在拖动元素的位置上。this.SET_DRAG_INDEX(addIndex) 方法将组件的添加索引值存储在组件状态中，this.VIEW_ADD_PREVIEW(addIndex) 方法则在预览区域添加一个预添加组件，模拟组件最终被添加的位置。

如果预添加组件的索引值与上一次相同，则不进行任何操作，防止重复添加组件。

onDragover(event) {
  event.preventDefault() // 设置当前区域可以被进入
  const viewWrapTop = 191 // 页面预览区域距离顶部top
  // 拖动距离预览区top距离
  let dropTop = this.$refs.pageView.scrollTop + event.pageY - viewWrapTop
  console.log(dropTop, 'dropTop')
  // 获取当前拖动组件要添加位置的索引
  let addIndex = 0
  for (let i = this.componentsTopList.length - 1; i >= 0; i--) {
    const value = this.componentsTopList[i]
    const prev = this.componentsTopList[i - 1] || 0
    const _half = (value - prev) / 2 // 当前组件高度的一半
    if (i === 0 && dropTop <= _half) break
    if (dropTop > (value - _half)) {
      addIndex = i + 1
      break
    }
  }
  // 预览区域生成预添加组件
  if (this.addComponentIndex === addIndex) return
  // console.log('预添加组件，索引值为', this.componentsTopList, addIndex, dropTop)
  this.SET_DRAG_INDEX(addIndex)
  this.VIEW_ADD_PREVIEW(addIndex)
}

代码功能概述:

• 阻止默认拖动行为
• 根据拖动位置计算组件添加索引
• 在预览区域生成预添加组件
• 存储组件添加索引
• 避免重复添加组件