vue组件拖拽自定义界面

Vue 组件拖拽可以通过使用 HTML5 的拖放 API 实现，具体步骤如下：

1. 在组件中定义一个 `draggable` 属性，设置为 `true`，表示该组件可拖拽。
2. 监听组件的 `dragstart` 事件，在事件处理函数中设置 `event.dataTransfer.setData` 方法，将要传递的数据存储到 `dataTransfer` 对象中，这里可以存储组件的标识符或其他需要传递的数据。
3. 监听组件的 `dragover` 事件，阻止默认行为（即禁止拖放元素的默认行为，如禁止在拖拽时选中文本），同时设置 `event.dataTransfer.dropEffect` 属性，表示当前的拖放操作是复制、移动还是链接等。
4. 监听组件的 `drop` 事件，在事件处理函数中获取 `dataTransfer` 对象中存储的数据，进行相关操作。

下面是一个简单的示例：

<template>
  <div>
    <div class="box" draggable="true" @dragstart="onDragStart">拖拽我</div>
    <div class="dropzone" @dragover.prevent @drop="onDrop">放置区域</div>
  </div>
</template>

<script>
export default {
  methods: {
    onDragStart(event) {
      // 设置要传递的数据
      event.dataTransfer.setData('text/plain', 'box');
    },
    onDrop(event) {
      // 获取传递的数据
      const type = event.dataTransfer.getData('text/plain');
      if (type === 'box') {
        console.log('拖拽成功！');
      }
    }
  }
}
</script>

在上面的示例中，我们在 `box` 元素上设置了 `draggable` 属性，并监听了 `dragstart` 事件，在事件处理函数中使用 `setData` 方法设置要传递的数据。在 `dropzone` 元素上监听了 `dragover` 和 `drop` 事件，分别阻止默认行为和获取传递的数据。当拖拽完成后，在控制台中会输出“拖拽成功！”。