vue中Sortable.js拖拽时候的背景颜色修改

在Vue中使用Sortable.js实现拖拽功能时，如果你想改变元素在拖动状态下的背景颜色，你可以通过监听Sortable提供的事件来完成这个操作。首先，你需要安装Sortable库，然后在组件中注册它，并设置一些选项，例如`onSortEnd`事件：

<template>
  <div class="draggable-container">
    <div v-for="(item, index) in items" :key="index" :class="{ dragging: isDragging(item)" draggable="true">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      items: [
        // ... 你的初始数据列表
      ],
      isDragging: false,
    };
  },
  mounted() {
    const sortable = new Sortable(this.$el, {
      onSortStart: (evt) => {
        this.isDragging = true;
        // 修改开始拖动元素的背景色，这里可以使用element.style.backgroundColor 或者直接操作CSS类
        evt.item.classList.add('dragging-background-color');
      },
      onSortEnd: (evt) => {
        this.isDragging = false;
        // 当排序结束时还原背景色
        evt.item.classList.remove('dragging-background-color');
      }
    });
  }
};
</script>

<style scoped>
.draggable-container {
  position: relative;
}

.dragging {
  background-color: #ccc; /* 这里可以替换为你想要的背景颜色 */
}

.dragging-background-color {
  background-color: red; /* 拖动过程中元素的背景颜色 */
}
</style>

在这个例子中，当元素开始被拖动时，我们给它添加一个名为`dragging-background-color`的CSS类，设置了红色作为背景颜色。当你释放鼠标或拖动结束后，再移除这个类，恢复原来的背景。