bootstrap vue 可拖动的DIV

Bootstrap Vue 没有提供可拖动的 DIV，但可以使用原生的 HTML5 drag and drop API 来实现。

示例代码如下：

<template>
  <div>
    <div 
      class="drag-box" 
      draggable="true" 
      @dragstart="dragStart"
      @dragend="dragEnd"
    >
      可拖动的 DIV
    </div>
    <div 
      class="drop-box"
      @dragover.prevent
      @drop="drop"
    >
      放置区域
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    dragStart(event) {
      // 设置被拖动元素的数据
      event.dataTransfer.setData("text", event.target.id);
    },
    dragEnd(event) {
      // 拖动结束后的操作
    },
    drop(event) {
      event.preventDefault();
      // 获取被拖动元素的数据
      const data = event.dataTransfer.getData("text");
      // 将被拖动元素添加到放置区域
      event.target.appendChild(document.getElementById(data));
    }
  }
}
</script>

<style>
.drag-box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

.drop-box {
  width: 200px;
  height: 200px;
  border: 2px dashed #ccc;
  text-align: center;
  line-height: 200px;
}
</style>

上面的代码中，我们创建了一个可拖动的 DIV，它的 `draggable` 属性被设置为 `true`，并且在 `dragstart` 事件中设置了被拖动元素的数据。在放置区域的 `drop` 事件中，我们获取了被拖动元素的数据，并将其添加到放置区域中。

在 CSS 中，我们设置了可拖动的 DIV 和放置区域的样式。