From a666b5771c61a5b29855fcbdaf13f3d043558ae3 Mon Sep 17 00:00:00 2001
From: tclqwl <33955341@qq.com>
Date: Mon, 14 Mar 2022 12:48:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=8E=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8F=E6=8B=96=E6=8B=BD=E7=BB=84=E4=BB=B6=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E5=8F=AA=E8=83=BD=E6=8B=96=E6=8B=BD=E5=88=B0=E7=94=BB?=
 =?UTF-8?q?=E5=B8=83=EF=BC=8C=E9=98=B2=E6=AD=A2=E6=8B=96=E6=8B=BD=E5=90=8E?=
 =?UTF-8?q?=E6=89=BE=E4=B8=8D=E5=88=B0=E6=96=B0=E5=A2=9E=E7=9A=84=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bigscreenDesigner/designer/index.vue      | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/report-ui/src/views/bigscreenDesigner/designer/index.vue b/report-ui/src/views/bigscreenDesigner/designer/index.vue
index 8109f0c2..e0edc82f 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/index.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/index.vue
@@ -16,10 +16,12 @@
         <!-- 左侧组件栏-->
         <el-tab-pane label="工具栏">
           <!-- <el-divider content-position="center">html</el-divider>-->
-          <draggable
+          <li
             v-for="widget in widgetTools"
             :key="widget.code"
-            @end="evt => widgetOnDragged(evt, widget.code)"
+            draggable="true"
+            @dragstart="dragStart(widget.code)"
+            @dragend="dragEnd()"
           >
             <div class="tools-item">
               <span class="tools-item-icon">
@@ -27,7 +29,7 @@
               </span>
               <span class="tools-item-text">{{ widget.label }}</span>
             </div>
-          </draggable>
+          </li>
         </el-tab-pane>
         <!-- 左侧图层-->
         <el-tab-pane label="图层">
@@ -197,7 +199,7 @@
               'background-origin': 'initial',
               'background-clip': 'initial'
             }"
-            @click.self="setOptionsOnClickScreen"
+            @click.self="setOptionsOnClickScreen"  @drop="widgetOnDragged($event)" @dragover="dragOver($event)"
           >
             <div v-if="grade" class="bg-grid"></div>
             <widget
@@ -330,6 +332,7 @@ export default {
       },
       // 大屏的标记
       screenCode: "",
+      dragWidgetCode:'',   //从工具栏拖拽的组件code
       // 大屏画布中的组件
       widgets: [
         {
@@ -660,14 +663,24 @@ export default {
     getPXUnderScale(px) {
       return this.bigscreenScaleInWorkbench * px;
     },
-
+    dragStart( widgetCode) {
+        this.dragWidgetCode =widgetCode;
+    },
+    dragEnd() {
+        this.dragWidgetCode=''
+    },
+    dragOver(evt){
+      evt.preventDefault()
+      evt.stopPropagation()
+      evt.dataTransfer.dropEffect = 'copy'
+    },
     // 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
-    widgetOnDragged(evt, widgetCode) {
-      let widgetType = widgetCode;
+    widgetOnDragged(evt) {
+      let widgetType = this.dragWidgetCode;
 
       // 获取结束坐标和列名
-      let eventX = evt.originalEvent.clientX; // 结束在屏幕的x坐标
-      let eventY = evt.originalEvent.clientY; // 结束在屏幕的y坐标
+      let eventX = evt.clientX; // 结束在屏幕的x坐标
+      let eventY = evt.clientY; // 结束在屏幕的y坐标
 
       let workbenchPosition = this.getDomTopLeftById("workbench");
       let widgetTopInWorkbench = eventY - workbenchPosition.top;