vue使用draggable-next的完整demo

以下是一个使用draggable-next的完整demo，包含了基本的拖拽功能和一些常见的配置项：

<template>
  <div>
    <div class="container">
      <div v-for="(item, index) in list" :key="item.id" class="item" :class="{ 'active': activeIndex === index }" @click="activeIndex = index">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'Demo',
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
        { id: 4, text: 'Item 4' },
        { id: 5, text: 'Item 5' },
      ],
      activeIndex: -1,
      options: {
        group: 'items',
        draggable: '.item',
        handle: '.item',
        animation: 200,
        easing: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
        ghostClass: 'ghost',
        chosenClass: 'chosen',
        dragClass: 'drag',
        forceFallback: true,
        scroll: true,
        scrollSensitivity: 50,
        scrollSpeed: 10,
        delay: 0,
        disabled: false,
        mirrorContainer: document.body,
        move: (evt, originalElement, destinationElement) => {},
        appendTo: 'body',
        zIndex: 9999,
      },
    };
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #eee;
  cursor: move;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

.item.active {
  background-color: #00bcd4;
  color: #fff;
  transform: scale(1.1);
}

.ghost {
  opacity: 0.5;
}

.chosen {
  background-color: #f5f5f5;
}

.drag {
  opacity: 0.5;
}
</style>

在这个demo中，我们首先导入了draggable-next的组件，并定义了一个名为"list"的数组，它包含了一些简单的对象，每个对象都有一个"id"属性和一个"text"属性。我们还定义了一个"activeIndex"变量来追踪当前选择的元素的索引。

然后我们定义了一个名为"options"的对象，它包含了各种可配置的选项。这些选项包括：

group：指定组名称，相同组名的元素可以互相拖拽。
draggable：指定可拖拽元素的选择器。
handle：指定元素的拖拽把手的选择器。
animation：指定动画持续时间，单位为毫秒。
easing：指定动画缓动函数。
ghostClass：指定拖拽时的占位元素样式类名。
chosenClass：指定被选中元素的样式类名。
dragClass：指定正在被拖拽的元素的样式类名。
forceFallback：如果为true，则在不支持原生HTML5拖拽API的浏览器中使用Polyfill。
scroll：如果为true，则在拖动元素接近容器边缘时自动滚动容器。
scrollSensitivity：指定滚动灵敏度，越大越灵敏。
scrollSpeed：指定滚动速度。
delay：指定拖拽开始的延迟时间，单位为毫秒。
disabled：如果为true，则禁用拖拽功能。
mirrorContainer：指定拖动元素的镜像容器。
move：定义一个回调函数，在拖动元素时调用。
appendTo：指定拖动元素的容器。
zIndex：指定拖动元素的z-index。

最后，在模板中，我们使用v-for指令将list数组中的每个元素渲染成一个简单的div元素。我们还使用:class指令来根据activeIndex变量的值动态添加样式类名。在div元素上，我们绑定了一个@click事件，当用户单击元素时，我们将activeIndex变量设置为当前元素的索引，以便高亮显示该元素。

最终，我们将整个组件导出，以便在其他地方使用