js鼠标拖拽元素在页面随意移动(vue)

第一步：mounted生命周期钩子中为window绑定点击事件

window.addEventListener('click',this.movementVideoClick)

第二步：methods封装一个函数。

 movementVideoClick() {

      var oDiv = document.getElementById("#id"); //获取这个div

      var disX = 0; //鼠标距离div的边的横向距离

      var disY = 0; //鼠标距离div的边的纵向距离

      oDiv.onmousedown = function (ev) {

        var oEvent = ev || event;

        disX = oEvent.clientX - oDiv.offsetLeft;

        disY = oEvent.clientY - oDiv.offsetTop;

        document.onmousemove = function (ev) {

          var oEvent = ev || event;

          var l = oEvent.clientX - disX; //div的左坐标

          var t = oEvent.clientY - disY; //右坐标

          //div要拖出可视区左侧时：

          if (l < 0) {

            l = 0;

          }

          //div要拖出可视区右侧时：

          //document.documentElement.clientWidth 可视区的宽度

          else if (

            l >

            document.documentElement.clientWidth - oDiv.offsetWidth

          ) {

            l = document.documentElement.clientWidth - oDiv.offsetWidth;

          }

          //div要拖出可视区上边时：

          if (t < 0) {

            t = 0;

          }

          //div要拖出可视区下边时：

          if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {

            t = document.documentElement.clientHeight - oDiv.offsetHeight;

          }

          oDiv.style.left = l + "px";

          oDiv.style.top = t + "px";

        };

        document.onmouseup = function () {

          document.onmousemove = null;

          document.onmouseup = null;

        };

        return false; //阻止默认事件

      };

}

第三步：在beforeDestroy生命周期钩子中解绑点击事件(性能优化问题)

window.removeEventListener('click',this.movementVideoClick)