拖拽功能与fabric的画布操作冲突的解决办法

场景：

fabric的画布内部自带的拖拽功能没有滚动条，现需要拖拽canvas外层的div，实现鼠标拖拽时，带动滚动条移动。

fabric鼠标按下事件会执行自动框选，和外层div的拖拽事件冲突。

解决思路：

在canvas外层div同级创建一个div，当点击拖拽按钮时，将这层div覆盖在最上层，实现鼠标拖拽事件的触发，拖拽事件方法内部，进行对canvasBox的拖动。

<div 
    v-show="btnType=='dragBtn'" 
    class="dragCanvasBox" 
    draggable="true"  
    @dblclick="backList"                                
    @dragstart="dragstartCanvasBox" 
    @dragover="dragoverCanvasBox" 
    @drop="dropCanvasBox">
</div>
<div class="canvasBox" id="canvasBox" @dblclick="backList">
    <canvas
      id="canvas"
      class="canvas"
      :style="style"
    ></canvas>
</div>

实现方法：

    // 开始拖拽canvas
    dragstartCanvasBox(e){
      this.startMoveCanvas = true
      var container = document.getElementById('canvasBox')
      this.moveObj = {
        startX: e.x,
        startY: e.y,
        startTop: container.scrollTop,
        startLeft: container.scrollLeft,
      }
    },
    // 结束拖拽canvas
    dragoverCanvasBox(e){
      e.preventDefault()
      this.moveObj['endX'] = e.x
      this.moveObj['endY'] = e.y
      let w = this.$utils.subtract(this.moveObj.endX , this.moveObj.startX)  
      let h = this.$utils.subtract(this.moveObj.endY , this.moveObj.startY)  
      var container = document.getElementById('canvasBox')
      let maxTop = container.scrollHeight - container.clientHeight -10
      let maxLeft = container.scrollWidth - container.clientWidth -10
      let top = this.moveObj.startTop + -h
      if(top > maxTop) top = maxTop
      if(top < 0) top = 0
      let left = this.moveObj.startLeft + -w
      if(left > maxLeft) left = maxLeft
      if(left < 0) left = 0
      container.scrollTop = top;
      container.scrollLeft = left;
      this.$forceUpdate()
    },
    // 拖拽canvas
    dropCanvasBox(e){
      e.preventDefault()
      this.startMoveCanvas = false;
    },