解决移动问题

src/renderer/components/BigShow.vue

@@ -22,12 +22,15 @@
         >
             <VueDragResize
                     v-for="itemV in signalPreList" :key="itemV.Id" class="sitem"
-                    :w="item.Width*bigScale/itemV.splitScreenStatus" :h="item.Height*bigScale/itemV.splitScreenStatus" :parentLimitation="true"
-                    @dragging="(obj) => dragging(obj,itemV)" @dragstop="(obj) => dragStop(obj,itemV)" @resizestop="(obj) => reSizeSignal(obj,itemV)"
+                    :w="item.Width*bigScale/itemV.splitScreenStatus" :h="item.Height*bigScale/itemV.splitScreenStatus" :parentLimitation="false"
+                    @dragging="(obj) => testThrottleFn(obj,itemV)"
+                    @dragstop="(obj) => dragStop(obj,itemV)"
+                    @resizing="(obj) => resizing(obj,itemV)"
+                    @resizestop="(obj) => reSizeSignal(obj,itemV)"
                     :style="{
                         position: 'fixed',
-                        top:itemV.top + 'px',
-                        left:itemV.left + 'px'
+                        left: itemV.left + 'px',
+                        top: itemV.top + 'px'
                     }"
             >
                 <div ref="signal">
@@ -55,7 +58,7 @@
     import VueDragResize from 'vue-drag-resize'
 
     import '../assets/less/splitscreen.less'
-    import {elePosition, getElementLeft, getElementTop, getStaticFile, guId} from "../../utils/tools"
+    import {elePosition, getElementLeft, getElementTop, getStaticFile, guId, throttleFunc} from "../../utils/tools"
     import {reqRefreshView} from "../api"
     import VideoPlayer from "./player.vue"
 
@@ -84,6 +87,7 @@
                 },
                 screenPosition:{}, // 大屏在视口中的位置
                 newIndex: 1, // 开窗拖到第几个格子中
+                testThrottleFn:throttleFunc(this.handleDragging, 20),
             }
         },
 
@@ -106,7 +110,6 @@
         updated() {
             // 获取大屏在视口中的位置
             const screenDiv = document.getElementById('bigscreen')
-            // const screenDiv = this.$refs
             this.screenPosition = {
                 top:getElementTop(screenDiv),
                 left:getElementLeft(screenDiv)
@@ -115,26 +118,8 @@
 
         methods: {
             // 改变信号源
-            log(value) {
-                const signalList = this.$store.state.signalPreList
-                const currentElement = signalList.filter(item => item.sourceId === value.added.element.sourceId)
-                const otherElement = signalList.filter(item => item.sourceId !== value.added.element.sourceId)
-
-                // this.newIndex = value.added.newIndex-signalList.length+1
+            log() {
                 this.newIndex = this.$store.state.positionNum
-
-                const signalList2 = signalList.filter(item => item.newIndex)
-                // 考虑多种情况
-                // 1.正序排列
-                const flag = signalList2.every(item => item.newIndex < value.added.newIndex) || signalList.length === 1
-                if(flag){
-                    currentElement[currentElement.length-1].newIndex = value.added.newIndex
-                    this.$store.dispatch('updateSignalPreList', [...otherElement,...currentElement])
-                }else {
-                // 2.乱序
-                    currentElement[currentElement.length-1].newIndex = value.added.newIndex - signalList.length + 1
-                    this.$store.dispatch('updateSignalPreList', [...otherElement,...currentElement])
-                }
             },
 
             // 大屏开窗接口提交
@@ -170,22 +155,34 @@
                 })
             },
 
-            // 拖动进行中(使用函数防抖)
-            dragging(obj,item) {
-                /*const arr = this.$store.state.signalPreList.filter(a => a.Id !== item.Id)
-                item.top = item.top + obj.top
-                item.left = item.left + obj.left
+            // 处理信号源拖拽中
+            handleDragging(obj,item) {
+                const arr = this.$store.state.signalPreList.filter(a => a.Id !== item.Id)
+                item.top = this.screenPosition.top + obj.top
+                item.left = this.screenPosition.left + obj.left
                 this.$store.dispatch('updateSignalPreList',[...arr,item])
-                console.log(item)*/
             },
 
             // 拖动结束
-            dragStop() {
+            dragStop(obj,item) {
+                console.log(obj)
+
+                /*const arr = this.$store.state.signalPreList.filter(a => a.Id !== item.Id)
+                item.top = item.top + obj.top
+                item.left = item.left + obj.left
+                console.log(obj,item)
+                this.$store.dispatch('updateSignalPreList',[...arr,item])*/
+
                 const arr = this.$store.state.signalPreList
                 this.reqRefreshBigScreen(arr)
             },
 
-            // 放大缩小信号源
+            // 缩放进行中
+            resizing(obj,itemV) {
+
+            },
+
+            // 放大缩小信号源(缩放结束事件)
             async reSizeSignal(obj,itemV) {
                 const arr = this.$data.streamWindows
                 // 找出当前改动的信号源
@@ -233,6 +230,7 @@
                         signalObj.height = this.currentBigshow[0].Height * this.$store.state.bigScale / (this.$store.state.splitScreenStatus+1)
                         signalObj.widthScale = signalObj.width / (this.currentBigshow[0].Width * this.$store.state.bigScale)
                         signalObj.heightScale = signalObj.height / (this.currentBigshow[0].Height * this.$store.state.bigScale)
+                        signalObj.isFixed = true // 是否使用固定定位
                         this.$store.dispatch('updateSignalPreList', [...arr2,signalObj])
 
                         // 添加定时器是为了得到最新的newIndex

src/utils/tools.js

@@ -87,19 +87,18 @@ export function gridPosition(splitStatus,count) {
     }
 }
 
-// 函数防抖
-export function debounce(fn, wait) {
-    var timer = null;
-    return function () {
-        var context = this
-        var args = arguments
-        if (timer) {
-            clearTimeout(timer);
-            timer = null;
+// 时间戳实现节流函数：
+export function throttleFunc(fn, delay) {
+    var previous = 0;
+    // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
+    return function() {
+        var _this = this;
+        var args = arguments;
+        var now = new Date();
+        if(now - previous > delay) {
+            fn.apply(_this, args);
+            previous = now;
         }
-        timer = setTimeout(function () {
-            fn.apply(context, args)
-        }, wait)
     }
 }