videoApp/src/renderer/components/SignalList.vue

<template>
    <draggable
            :style="{
                    left:signalListJson[0].Left+'px',
                    top:signalListJson[0].Top+'px',
                    width:signalListJson[0].Width + 'px',
                    height:signalListJson[0].Height + 'px',
                    zIndex:signalListJson[0].ZIndex,
                    display:signalListJson[0].IsVisibility ? 'block' : 'none',
                    fontSize:signalListJson[0].FontSize + 'px',
                    color:`#${signalListJson[0].ForegroundStr.slice(3)}`,
                    position:'absolute',
                    overflow:'auto',
                    }"
            class="signal_body"
            element="div"
            v-model="signalListJson[0].PreviewList"
            :options="dragOptions1"
            :move="onMove"
            @start="isDragging=true"
            @end="isDragging=false"

    >
        <!--列表项-->
        <div class="signal_item" v-for="item in signalListJson[0].PreviewList" :key="item.ID">
            <div class="signal_item_bg">
                <div class="signal_item_bg_body">
                    <div class="signal_item_bg_body_space"></div>
                    <div class="signal_item_bg_body_font">{{item.ShowName}}</div>
                </div>
            </div>
        </div>
    </draggable>
</template>

<script>
    import {mapState} from 'vuex'
    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable
        },

        methods: {
            // 移动信号源
            onMove({relatedContext, draggedContext}) {
                const relatedElement = relatedContext.element
                const draggedElement = draggedContext.element
                return (
                    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
                )
            },
        },

        computed: {
            ...mapState(['signalListJson']),
            dragOptions1() {
                return {
                    animation: 0,
                    group: {
                        name: "description",
                        pull: 'clone',
                        put: false
                    },
                    ghostClass: "ghost",
                }
            },
            dragOptions2() {
                return {
                    animation: 0,
                    group: "description",
                }
            },
        }
    }
</script>

<style scoped>

</style>