首页 > Web开发 > 详细

vue js实现拖拽

时间:2019-11-14 19:35:24      阅读:96      评论:0      收藏:0      [点我收藏+]
<div class="add-input2" @mousedown.stop.prevent="dragImg" ref=‘dragImgDom‘> //样式一定要定位且有宽高
//内容
</div>
//拖拽
    dragImg(e) {
      this.$refs.dragImgDom.style.cursor = "move";
      this.dragFlag = true;
      this.mouseLeft = e.clientX - parseInt(this.$refs.dragImgDom.offsetLeft);
      this.mouseTop = e.clientY - parseInt(this.$refs.dragImgDom.offsetTop);
      document.onmousemove = e => {
        if (this.dragFlag) {
          this.$refs.dragImgDom.style.cursor = "move";
          this.curX = e.clientX - this.mouseLeft;
          this.curY = e.clientY - this.mouseTop;
          this.$refs.dragImgDom.style.left = this.curX + "px";
          this.$refs.dragImgDom.style.top = this.curY + "px";
        }
      };
      document.onmouseup = () => {
        this.dragFlag = false;
        this.$refs.dragImgDom.style.cursor = "default";
      };
    },

 

vue js实现拖拽

原文:https://www.cnblogs.com/houBlogs/p/11858986.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!