vue draggable属性

Vue的`draggable`属性是用于实现元素拖拽功能的一个指令。它可以应用在任何元素上，使其可以被用户拖拽。

使用`draggable`属性的步骤如下：

1. 在需要拖拽的元素上添加`v-draggable`指令。
2. 在Vue实例中定义一个名为`dragOptions`的对象，用于配置拖拽行为。
3. 在`dragOptions`中定义`start`, `drag`, `end`等事件处理函数。

下面是一个示例代码：

<template>
  <div v-draggable="dragOptions" class="draggable-element">
    Drag me!
  </div>
</template>

<script>
export default {
  data() {
    return {
      dragOptions: {
        start: this.dragStart,
        drag: this.dragging,
        end: this.dragEnd
      }
    };
  },
  methods: {
    dragStart(event) {
      // 拖拽开始时执行的操作
      console.log("Drag start");
    },
    dragging(event) {
      // 拖拽过程中执行的操作
      console.log("Dragging");
    },
    dragEnd(event) {
      // 拖拽结束时执行的操作
      console.log("Drag end");
    }
  }
};
</script>

<style>
.draggable-element {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  color: #ffffff;
  text-align: center;
  line-height: 100px;
}
</style>

在上面的示例中，通过给`<div>`元素添加`v-draggable`指令，使其可拖拽。同时，我们定义了`dragOptions`对象来配置拖拽行为，并通过`start`、`drag`和`end`等事件处理函数来实现对应的操作。