Question

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

表格元素外部的按钮是应该更改其颜色的按钮。

这是一个有效的代码笔：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

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

我用以下结果修改了您的codepen：https://codepen.io/djsmedes/pen/WqRdxm

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

1 个答案: