左边桌面小组件目录赋值

1. 拖动器功效

将左边桌面小组件拖动到核心区域画板中

2.网页布局及不同区域功效

专用工具

放置一些实用工具，如：撤消，删掉，重设等；

左边桌面小组件目录

赋值3D渲染所有桌面小组件，用于支持中心画板地区应用；

核心画板地区

承重左边桌面小组件拼装成一个大屏幕网页页面，有标准、道路标线等，桌面小组件在画板中可任意拖拽也支持8点等比例缩放，适用电脑鼠标摆放桌面小组件上后鼠标右键菜单，作用有撤消上一步、删掉该桌面小组件等；

右边配置项

主要有三个一部分，桌面小组件数据库配备，桌面小组件外型特性配备，桌面小组件事情配备；

3.拖动基本原理

html5里的适用拖动的特性「draggable」，draggable设为"true"时，表明该原素可拖动；当原素为照片、连接、文字时，draggable特性默认"true"，不用手动式设定，除非是将这些三种原素禁止使用拖动时，需人工设定draggable="false"；其他原素必须手动式设定draggable="true"来支撑该原素可拖动；

关键方法如下：

3.1 将需要拖动的桌面小组件设定draggable="true"

<component :is="comp.comp" draggable="true" />

// 所有桌面小组件结合 
const widgetList = ref>([])

/** 复位桌面小组件 */ 
function initWidget() { 
    widgetList.value.push({ 
        index:1, 
        name: 'BarChart', 
        comp: BarChart 
      }, { 
        index:2, 
        name: 'LineChart', 
        comp: BarChart 
      }) 
 } 
 // 复位桌面小组件目录 
 initWidget()

3.2 拖动位置设置拖动逐渐事情@dragstart

        <!--
         在 dragstart 事情处理过程中，大家获得了客户拖拽元素引入。
         @dragstart="e => onWidgetDragStart(e, comp)"
        -->
        <!------------html一部分------------->
        <div class="w-220px bg-blue-100 pl-40px">
            左边桌面小组件目录
            <div
                v-for="comp in widgetList"
                :key="comp.index"
                @dragstart="e => onWidgetDragStart(e, comp)">
                {{ comp.name }}
                <component :is="comp.comp" draggable="true" />
            </div>
        </div>
        <!------------js一部分------------->
        // 现阶段拖动的桌面小组件 
        let currentDragWidget = {} as widget 
        // 现阶段拖动桌面小组件的xy坐标 
        let currentDragWidgetAxis = {} as {x:number, y:number} 
        /** 逐渐拖动桌面小组件 */ 
        function onWidgetDragStart(e: DragEvent, comp: widget) { 
            currentDragWidget = comp 
            currentDragWidgetAxis = {x: e.offsetX, y: e.offsetY} 
        }

3.3 画板位置设置「拖动完毕」@dragover及「摆放」事情@drop

        <! --

            在总体目标容器 dragover 事情处理过程中，大家启用 event.preventDefault()，这让它可以接受 drop 事情,不然drop时间不会起效。

            @dragover="e => e.preventDefault()"
      在摆放区域内的 drop 事情处理过程中，我们将要可拖动元素从初始地区移到可摆放地区。

            @drop="onWidgetDrop"

        -->
        <!------------html一部分------------->
        <div
            class="flex-1 bg-blue-200 flex flex-col"
            @dragover="e => e.preventDefault()"
            @drop="onWidgetDrop">
            核心画板地区
            <div
                v-for="item in currentCanvasComp"
                :key="item.index">
                {{ item.name }}
                <component :is="item.comp" />
            </div>
        </div>
        <!------------js一部分------------->
        // 所有桌面小组件结合
        const widgetList = ref<Array<widget>>([])

        // 现阶段画板中部件结合
        const currentCanvasComp = ref<Array<widgetDrag>>([])
        /** 摆放拖动的桌面小组件 */
        function onWidgetDrop(e: DragEvent) {
            console.log('e=>', e)
            currentCanvasComp.value.push({
                ...currentDragWidget,
                x: e.offsetX-currentDragWidgetAxis.x,
                y: e.offsetY-currentDragWidgetAxis.y,
                active: false,
                w: 100,
                h: 100
            })
        }

3.4 画板内拖动及8点等比例缩放

应用vue3-draggable-resizable软件来支撑画板里的拖拽和放大。

汇总

到此，一个简单的拖动器主要功能就实现了，关键取决于html5支撑的draggable特性以及事情；