vuejs 可排序在拖动时改变颜色？

Question

我正在尝试使用 sortable 实现 Vue 拖放，到目前为止它似乎可以正常工作，但是如何在拖动开始时更改元素的颜色？

table 元素外的按钮是其颜色应该改变的按钮。

这是一个工作代码笔：https://codepen.io/anon/pen/pXRWeP

  <v-container>
      <v-data-table :headers="headers" :items="desserts" hide-actions 
   class="elevation-2">
        <template slot="items" slot-scope="props">
       <td >
        <v-btn class="handle" style="max-width: 28px;">
        <v-icon>drag_handle</v-icon>
        </v-btn></td>
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
      </v-data-table>
    <v-btn>Change color of this button when dragging starts</v-btn>
  </v-container>


     new Vue({
   el: '#app',
  data: () => ({
    headers: [
    {
      text: "",
      align: "left",
      sortable: false
    },
    {
      text: "Dessert (100g serving)",
      align: "left",
      sortable: false,
      value: "name"
    },
    { text: "Calories", value: "calories" },
    { text: "Fat (g)", value: "fat" },
    { text: "Carbs (g)", value: "carbs" },
    { text: "Protein (g)", value: "protein" },
    { text: "Iron (%)", value: "iron" }
  ],
  desserts: [
    {
      value: false,
      name: "Lollipop",
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: "1%"
    },
    {
      value: false,
      name: "Marshamallow",
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
      iron: "7%"
    },
    {
      value: false,
      name: "Noughat",
      calories: 305,
      fat: 3.7,
      carbs: 67,
      protein: 4.3,
      iron: "8%"
    },
    {
      value: false,
      name: "Oreo",
      calories: 356,
      fat: 16.0,
      carbs: 49,
      protein: 3.9,
      iron: "16%"
    },
  ]
 }),
  mounted() {
   let table = document.querySelector(".v-datatable tbody");
   const _self = this;
   Sortable.create(table, {
     handle: ".handle",
      onEnd({ newIndex, oldIndex }) {
      const rowSelected = _self.desserts.splice(oldIndex, 1)[0]; 
      _self.desserts.splice(newIndex, 0, rowSelected); 
     }
   });
  }
 })

提前谢谢大家。

Answer 1

您已经在 Sortable.create 调用中为 onEnd 定义了一个函数。为 onStart 添加一个。在 data 中添加一个 color 键，并将按钮的颜色绑定到它。在您的 onStart 调用中，将 _self.color 设置为您的新颜色；在 onEnd 中，将其设置回原来的颜色。

我修改了你的代码笔，结果是：https://codepen.io/djsmedes/pen/WqRdxm

vuejs 可排序在拖动时改变颜色？

vuejs sortable change color on drag?

javascript

rubaxa-sortable

vuejs2

vuetify.js