好的，这里是一个完整的示例代码，可以帮助您更好地理解如何使用vuedraggable
新增sku并进行拖拽
添加商品属性：
```html
<template>
<div>
<div class="
sku-item" v-for="(
sku, index) in
skus" :key="
sku.id">
<div class="
sku-header">
SKU {{ index + 1 }}
<button @click="remove
Sku(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="add
Sku">
添加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: {
add
Sku() {
const new
Sku = {
id: this.
skus.length + 1,
attributes: [
{ id: 1, name: '颜色', value: '' },
{ id: 2, name: '尺码', value: '' },
],
};
this.
skus.push(new
Sku);
},
remove
Sku(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: source
Sku, index: sourceIndex } = this.dragging;
const attribute = source
Sku.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变量。在方法中，我们使用add
Sku方法来
添加新的
sku，使用remove
Sku方法来删除
sku，使用addAttribute方法来
添加属性，使用removeAttribute方法来删除
属性，使用startDragging方法来在
属性拖动时设置dragging变量，使用endDragging方法来在拖放操作完成后重置dragging变量，使用handleDrop方法来处理拖放操作的逻辑。我们还使用了CSS来美化页面。
本文介绍了如何在前端实现商品SKU属性的添加，通过三级联动获取属性并生成表格。同时，详细展示了使用jQuery.fileupload插件实现图片上传，支持IE8及主流浏览器，并在上传完成后将数据以JSON格式发送给后台。
最低0.47元/天 解锁文章
1556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
