vue可拖拽移动放大缩小的弹框组件

完成一次拖放的事件过程是： dragstart –> dragenter –> dragover –> drop –> dragend
下面是HTML5的拖拽事件
dragstart：开始拖元素触发，作用于拖拽元素
dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发，作用于目标元素
dragover：当元素拖动到drop元素上时触发，作用于目标元素
drop：当元素放下到drop元素触发，作用于目标元素
dragleave ：当元素离开drop元素时触发，作用于目标元素
drag：每次元素被拖动时会触发，作用于目标元素
dragend：放开拖动元素时触发，作用于目标元素

 js中获取鼠标滚动量/滚动了多少可以用onwheel事件来实现放大缩小。

html代码如下

  css代码主要用到positon:fixed让无素在窗口最上面

 1.父元素的宽-自适应值 ini父元素的高-自适应值

2.元素拖拽前距离浏览器的X轴位置

3.元素拖拽前距离浏览器的Y轴位置

4.获取计算偏移量

5.获取元素的左偏移量

6.获取元素的右偏移量

7.设置缩放比例

8.元素宽 元素高

9.子元素缩放比例

监听键盘Esc按键事件关闭弹框

  // 监听键盘Esc按键事件
      this.$nextTick(() => {
        // 按下键盘
        document.addEventListener('keydown', (e) => {
          // Esc按键是27
          if (e.keyCode === 27) {
            // 在这里写你的操作逻辑
            this.hide()
          }
        })

 需注意：去除默认的预览图

虽然setDragImage比较鸡肋，但是我们可以设置一张透明的图片就可以实现去除默认的预览图的效果了

      document.addEventListener('dragstart', function (ev) {
          let img = new Image()
          img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E"
          ev.dataTransfer.setDragImage(img, 0, 0)
        })
      })

全部源代码