Vue 使用 draggable-next 实现拖放功能完整示例

<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>
<p>在这个示例中，我们首先引入了 draggable-next 组件，并定义了一个名为 'list' 的数组，它包含了一些简单的对象，每个对象都有 'id' 和 'text' 属性。我们还定义了一个 'activeIndex' 变量来追踪当前选中的元素索引。</p>
<p>然后，我们定义了一个名为 'options' 的对象，它包含了各种可配置的拖放选项，例如：</p>
<ul>
<li>group：指定组名称，相同组名的元素可以互相拖拽。</li>
<li>draggable：指定可拖拽元素的选择器。</li>
<li>handle：指定元素的拖拽把手的选择器。</li>
<li>animation：指定动画持续时间，单位为毫秒。</li>
<li>easing：指定动画缓动函数。</li>
<li>ghostClass：指定拖拽时的占位元素样式类名。</li>
<li>chosenClass：指定被选中元素的样式类名。</li>
<li>dragClass：指定正在被拖拽的元素的样式类名。</li>
<li>forceFallback：如果为 true，则在不支持原生 HTML5 拖拽 API 的浏览器中使用 Polyfill。</li>
<li>scroll：如果为 true，则在拖动元素接近容器边缘时自动滚动容器。</li>
<li>scrollSensitivity：指定滚动灵敏度，越大越灵敏。</li>
<li>scrollSpeed：指定滚动速度。</li>
<li>delay：指定拖拽开始的延迟时间，单位为毫秒。</li>
<li>disabled：如果为 true，则禁用拖拽功能。</li>
<li>mirrorContainer：指定拖动元素的镜像容器。</li>
<li>move：定义一个回调函数，在拖动元素时调用。</li>
<li>appendTo：指定拖动元素的容器。</li>
<li>zIndex：指定拖动元素的 z-index。</li>
</ul>
<p>最后，在模板中，我们使用 v-for 指令将 'list' 数组中的每个元素渲染成一个简单的 div 元素。我们还使用 :class 指令来根据 'activeIndex' 变量的值动态添加样式类名。在 div 元素上，我们绑定了一个 @click 事件，当用户单击元素时，我们将 'activeIndex' 变量设置为当前元素的索引，以便高亮显示该元素。</p>
<p>最终，我们将整个组件导出，以便在其他地方使用。</p>