vue实现div拖拽

261 阅读1分钟

<------------------------html--------------------------->

<--<div class="rightecharts" id="chartPeople" @mousedown="move">-->

<--------------------------js------------------------------>

data() {
    return {
        positionX: 0,
        positionY: 0,
    }
},
  methods: {

           move(e) {

                   console.log('1111')

                   let odiv = e.target //获取目标元素

                   console.log(odiv)

                //算出鼠标相对元素的位置

                let disX = e.clientX - odiv.offsetLeft

                let disY = e.clientY - odiv.offsetTop

                 document.onmousemove = (e) => {

                //鼠标按下并移动的事件

               //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置

                 let left = e.clientX - disX

                 let top = e.clientY - disY

               //绑定元素位置到positionX和positionY上面

               this.positionX = top

               this.positionY = left

              //移动当前元素

                 odiv.style.left = left + 'px'

                 odiv.style.top = top + 'px'

                }

                      document.onmouseup = (e) => {

                      document.onmousemove = null

                      document.onmouseup = null

               }

     },

#chartPeople { position: relative; /*定位*/ top: 10px; left: 10px; width: 200px; height: 200px; z-index: 1000; // background: #666; /*设置一下背景*/ }