73 lines
No EOL
1.4 KiB
Vue
73 lines
No EOL
1.4 KiB
Vue
<script setup lang="ts">
|
|
import {onMounted, ref, watch} from "vue";
|
|
import draggable from "vuedraggable";
|
|
|
|
const props = defineProps({
|
|
tracks: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
console.log(props.tracks)
|
|
|
|
const trackList = ref([])
|
|
|
|
onMounted(() => {
|
|
trackList.value = props.tracks.map((track, key) => {
|
|
const track_info = {
|
|
type: null,
|
|
title: '',
|
|
order: key
|
|
}
|
|
if (track.file !== null) {
|
|
track_info.type = 'file'
|
|
track_info.title = track.file.track_title
|
|
} else if (track.block !== null) {
|
|
track_info.type = 'block'
|
|
track_info.title = track.block.name
|
|
}
|
|
return track_info
|
|
})
|
|
|
|
console.log(trackList)
|
|
})
|
|
|
|
const checkMove = (e) => {
|
|
//console.log(e.draggedContext.futureIndex)
|
|
}
|
|
|
|
watch(trackList, (newVal, oldVal) => {
|
|
console.log(newVal)
|
|
})
|
|
|
|
const test =(event) => {
|
|
console.log(event)
|
|
console.log(trackList)
|
|
}
|
|
|
|
defineExpose({ draggable });
|
|
</script>
|
|
|
|
<template>
|
|
<v-list>
|
|
<draggable
|
|
:list="trackList"
|
|
item-key="position"
|
|
group="tracklist"
|
|
:move="checkMove"
|
|
@change="test"
|
|
>
|
|
<template #item="{ element }">
|
|
<v-list-item>
|
|
<v-list-item-title v-html="element.title"></v-list-item-title>
|
|
<v-list-item-subtitle v-html="element.subtitle"></v-list-item-subtitle>
|
|
</v-list-item>
|
|
</template>
|
|
</draggable>
|
|
</v-list>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |