videoApp/src/renderer/components/SignalList.vue

<template>
    <draggable
            :style="{
                left:signalBorder[0].Left*Scale+'px',
                top:signalBorder[0].Top*Scale+'px',
                width:signalBorder[0].Width*Scale + 'px',
                height:signalBorder[0].Height*Scale + 'px',
                zIndex:signalBorder[0].ZIndex,
                display:signalBorder[0].IsVisibility ? 'block' : 'none',
                fontSize:signalBorder[0].FontSize*Scale + 'px',
                color:`#${signalBorder[0].ForegroundStr.slice(3)}`,
                position:'absolute',
                overflow:'auto',
            }"
            class="signal_body"
            element="div"
            v-model="signalListJson"
            :options="dragOptions1"
            :move="onMove"
            @start="isDragging=true"
            @end="isDragging=false"
    >
        <!--列表项-->
        <div class="signal_item" v-for="item in signalListJson" :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','signalBorder','Scale']),
            dragOptions1() {
                return {
                    animation: 0,
                    group: {
                        name: "description",
                        pull: 'clone',
                        put: false
                    },
                    ghostClass: "ghost",
                }
            },
            dragOptions2() {
                return {
                    animation: 0,
                    group: "description",
                }
            },
        }
    }
</script>

<style scoped>

</style>