vue js拖拽

最新推荐文章于 2025-03-05 17:06:43 发布

原创最新推荐文章于 2025-03-05 17:06:43 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue #css #vue.js #html5

js 同时被 3 个专栏收录

75 篇文章

订阅专栏

vue

49 篇文章

订阅专栏

html5

13 篇文章

订阅专栏

本文介绍如何使用VueJS实现元素的拖拽功能。通过监听mousedown、mousemove和mouseup事件，调整元素的位置，使元素能够随鼠标移动而移动。代码示例展示了如何在data中声明拖拽数据，以及在methods中定义事件处理函数。

vue js拖拽

HTML

<div class="kongtiaojifang" ref="kongtiao" @mousedown.stop="mouseDownHandleelse($event)" @mouseup.stop="mouseUpHandleelse($event)">
  </div>

data的声明

data () {
    return {
      moveDataelse: {
        x: null,
        y: null
      },
    }
  },

js部份

mouseDownHandleelse (event) {
      this.moveDataelse.x = event.pageX - this.$refs.kongtiao.offsetLeft
      this.moveDataelse.y = event.pageY - this.$refs.kongtiao.offsetTop
      event.currentTarget.style.cursor = 'move'
      window.onmousemove = this.mouseMoveHandleelse
    },
    mouseMoveHandleelse (event) {
      let moveLeft = event.pageX - this.moveDataelse.x + 'px'
      let moveTop = event.pageY - this.moveDataelse.y + 'px'
      this.$refs.kongtiao.style.left = moveLeft
      this.$refs.kongtiao.style.top = moveTop
    },
    mouseUpHandleelse (event) {
      window.onmousemove = null
      event.currentTarget.style.cursor = 'move'
      console.log('鼠标松开了')
    },

CSS

.kongtiaojifang{
    height: 200px;
    width: 400px;
    position: fixed;
    top: 150px;
    left: 550px;
    cursor: pointer;
    background:#00f;
  }