vue 中的鼠标拖拽

鼠标跟随相信大家都很熟悉了，在这里我的随笔呢说的是怎么在vue中使用鼠标跟随，onmousedown，onmousemove 这些事件是原生事件，按理说vue使用是没有问题的，况且pc大部分事件是可以在移动端使用的，但是在vue项目中使用它却不生效，没有效果。

然后百度查询vue事件，了解到vue已经规定了移动端wap使用的事件，touchstart，touchmove等，这样往下开展工作就容易多了！直接上实例吧

样式：

#box  {

   100px;

  height: 100px;

  // aquamarine;

  position: fixed;

  top: 200px;

  right: 30px;

  z-index: 999;

  -webkit-app-region: no-drag;

}

img  {

   100%;

  height: 100%;

  cursor: move;

}

#scale  {

   10px;

  height: 10px;

  overflow: hidden;

  cursor: se-resize;

  position: absolute;

  right: 0;

  bottom: 0;

  // background-color: rgb(122,191,238);

}

 

结构：

<div id="father">
<div id="box">
<img src="http://d.hiphotos.baidu.com/zhidao/pic/item/e61190ef76c6a7efd517f640fbfaaf51f3de66a6.jpg"/>
<div id="scale"></div>
</div>
</div>

methods：

mouseFollow (that) {

      // box是装图片的容器,fa是图片移动缩放的范围,scale是控制缩放的小图标

      var box = document.getElementById('box')

      var fa = document.getElementById('father')

      // var scale = document.getElementById('scale')

      // 图片移动效果

      box.addEventListener('touchstart', function (ev) {

        document.getElementById('box').setAttribute('data-flag', false)

        var firstTime = new Date().getTime()

        var oEvent = ev

        // 浏览器有一些图片的默认事件,这里要阻止

        oEvent.preventDefault()

        var disX = oEvent.touches[0].clientX - box.offsetLeft

        var disY = oEvent.touches[0].clientY - box.offsetTop

        fa.addEventListener('touchmove', function (ev) {

          oEvent = ev

          oEvent.preventDefault()

          var x = oEvent.touches[0].clientX - disX

          var y = oEvent.touches[0].clientY - disY

          // 图形移动的边界判断

          x = x <= 0 ? 0 : x

          x =

            x >= fa.offsetWidth - box.offsetWidth

              ? fa.offsetWidth - box.offsetWidth

              : x

          y = y <= 95 ? 95 : y

          y =

            y >=

            (document.documentElement.clientHeight ||

              document.body.clientHeight) -

              (box.clientHeight + 10)

              ? (document.documentElement.clientHeight ||

                  document.body.clientHeight) -

                (box.clientHeight + 10)

              : y

          // 图片的新定位

          box.style.left = x + 'px'

          box.style.top = y + 'px'

        })

        // 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效

        fa.onmouseleave = function () {

          fa.addEventListener('touchmove', null)

          fa.onmouseup = null

        }

        // 鼠标弹起后停止移动

        fa.addEventListener('touchend', function () {

          var lastTime = new Date().getTime()

          if ((lastTime - firstTime) < 200) {

            that.$router.push({path: '/drugstore/addcar'})

            document.getElementById('box').setAttribute('data-flag', true)

            return false

          }

          fa.addEventListener('touchmove', null)

          fa.onmouseup = null

        })

      })

    }

 

mounted：

　　var that = this

　　this.mouseFollow(that)