You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
1.9 KiB
94 lines
1.9 KiB
<template>
|
|
<div class="right-wr scroll-h" :id="'wrItems' + id">
|
|
<div v-for="(n, i) in list" :key="n.itemId" class="right-item">
|
|
<div class="item-label">{{ n.label }}</div>
|
|
<div class="item-btn">
|
|
<el-tag type="danger" class="mr10" @click="handleDelItem(n, i)">
|
|
<i class="el-icon-delete"></i>
|
|
</el-tag>
|
|
<el-tag type="primary">
|
|
<i class="el-icon-rank"></i>
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Sortable from 'sortablejs'
|
|
export default {
|
|
name: 'DragItems',
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
id: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dragList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
// this.dragSort()
|
|
},
|
|
watch: {
|
|
list: {
|
|
handler(val) {
|
|
this.dragList = val.filter(item => item.itemType != 'inputRange')
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
handleDelItem(item, i) {
|
|
this.$emit('del', { item, index: i})
|
|
},
|
|
dragSort () {
|
|
const el = document.getElementById(`wrItems${this.id}`)
|
|
this.sortTable = Sortable.create(el, {
|
|
group: 'right-item',
|
|
ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
|
|
chosenClass: 'sortable-choose',
|
|
animation: 500,
|
|
delay: 0,
|
|
onEnd: evt => {
|
|
console.log('evt----', evt)
|
|
const targetRow = this.list.splice(evt.oldIndex, 1)[0]
|
|
this.list.splice(evt.newIndex, 0, targetRow)
|
|
this.$emit('drag', this.list)
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.right-wr {
|
|
max-height: calc(80vh - 270px);
|
|
overflow: auto;
|
|
.right-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
padding: 10px 30px;
|
|
|
|
}
|
|
}
|
|
.sortable-choose {
|
|
background: #eee;
|
|
}
|
|
.mr10 {
|
|
margin-right: 10px;
|
|
}
|
|
.mb10 {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|