鼠标拉出一个矩形-代码
发布于 17 天前 作者 qjzd 76 次浏览 来自 码农

鼠标拉出一个矩形

import interact from 'interactjs'

const $Box = this.$el
      const initPosition = {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
      }
      this.drawingable = interact($Box)
        .styleCursor(false)
        .draggable({
          inertia: false,
          autoScroll: true,
          restrict: 'self'
        })
        .on('dragstart', event => {
          initPosition.x = event.pageX - event.rect.left
          initPosition.y = event.pageY - event.rect.top
          initPosition.width = 0
          initPosition.height = 0
          this.multiToolWinStyle.display = 'block'
        })
        .on('dragmove', event => {
          initPosition.width += event.delta.x
          initPosition.height += event.delta.y
          if (initPosition.width <= 0) {
            this.multiToolWinStyle.left = initPosition.x + initPosition.width
          } else {
            this.multiToolWinStyle.left = initPosition.x
          }
          if (initPosition.height <= 0) {
            this.multiToolWinStyle.top = initPosition.y + initPosition.height
          } else {
            this.multiToolWinStyle.top = initPosition.y
          }
          this.multiToolWinStyle.width = Math.abs(initPosition.width)
          this.multiToolWinStyle.height = Math.abs(initPosition.height)
        })
        .on('dragend', event => {
          this.multiToolWinStyle.display = 'none'
        })
回到顶部