新增sku并进行拖拽添加商品属性

好的，这里是一个完整的示例代码，可以帮助您更好地理解如何使用vuedraggable新增sku并进行拖拽添加商品属性：

<template>
  <div>
    <div class="sku-item" v-for="(sku, index) in skus" :key="sku.id">
      <div class="sku-header">
        SKU {{ index + 1 }}
        <button @click="removeSku(index)">删除</button>
      </div>
      <div class="sku-attributes">
        <div class="attribute-item" v-for="(attribute, i) in sku.attributes" :key="attribute.id">
          {{ attribute.name }}
          <span class="drag-handle" v-if="i !== 0" @mousedown="startDragging(sku, i)">☰</span>
          <button @click="removeAttribute(sku, i)">删除</button>
        </div>
        <div class="add-attribute" @click="addAttribute(sku)">添加属性</div>
      </div>
    </div>
    <div class="add-sku" @click="addSku">添加SKU</div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      skus: [
        {
          id: 1,
          attributes: [
            { id: 1, name: '颜色', value: '红色' },
            { id: 2, name: '尺码', value: 'L' },
          ],
        },
        {
          id: 2,
          attributes: [
            { id: 1, name: '颜色', value: '蓝色' },
            { id: 2, name: '尺码', value: 'M' },
          ],
        },
      ],
      dragging: null,
    };
  },
  methods: {
    addSku() {
      const newSku = {
        id: this.skus.length + 1,
        attributes: [
          { id: 1, name: '颜色', value: '' },
          { id: 2, name: '尺码', value: '' },
        ],
      };
      this.skus.push(newSku);
    },
    removeSku(index) {
      this.skus.splice(index, 1);
    },
    addAttribute(sku) {
      const newAttribute = {
        id: sku.attributes.length + 1,
        name: '',
        value: '',
      };
      sku.attributes.push(newAttribute);
    },
    removeAttribute(sku, index) {
      sku.attributes.splice(index, 1);
    },
    startDragging(sku, index) {
      this.dragging = { sku, index };
    },
    endDragging() {
      this.dragging = null;
    },
    handleDrop(sku, attributeIndex) {
      if (this.dragging) {
        const { sku: sourceSku, index: sourceIndex } = this.dragging;
        const attribute = sourceSku.attributes.splice(sourceIndex, 1)[0];
        sku.attributes.splice(attributeIndex, 0, attribute);
      }
    },
  },
};
</script>

<style>
.sku-item {
  margin-bottom: 20px;
  border: 1px solid #ddd;
}

.sku-header {
  background-color: #f0f0f0;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sku-attributes {
  padding: 10px;
}

.attribute-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.drag-handle {
  cursor: move;
  margin-right: 10px;
}

.add-attribute {
  cursor: pointer;
  color: blue;
}

.add-sku {
  cursor: pointer;
  color: blue;
  margin-top: 20px;
}
</style>

在这个示例中，我们使用了vuedraggable来实现拖放操作。我们为每个sku元素添加了一个drag-handle类，以便指定可拖动的元素。我们还为每个sku元素中的每个属性元素添加了一个@mousedown事件，以便在拖动属性时设置dragging变量。在方法中，我们使用addSku方法来添加新的sku，使用removeSku方法来删除sku，使用addAttribute方法来添加属性，使用removeAttribute方法来删除属性，使用startDragging方法来在属性拖动时设置dragging变量，使用endDragging方法来在拖放操作完成后重置dragging变量，使用handleDrop方法来处理拖放操作的逻辑。我们还使用了CSS来美化页面。