码迷,mamicode.com
首页 > Web开发 > 详细

vue js实现拖拽

时间:2019-11-14 18:05:07      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:nbsp   clientx   div   宽高   sele   etop   class   cursor   code   

<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实现拖拽

标签:nbsp   clientx   div   宽高   sele   etop   class   cursor   code   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!