vue鼠标拖动功能(拖动过快失效问题)

最新推荐文章于 2024-07-14 22:02:11 发布

QQ帝国

最新推荐文章于 2024-07-14 22:02:11 发布

阅读量3.1k

点赞数 1

分类专栏： # Vue2.6+ JavaScript 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/QQ_Empire/article/details/121356507

版权

Vue2.6+ 同时被 2 个专栏收录

174 篇文章 8 订阅

订阅专栏

JavaScript

121 篇文章 2 订阅

订阅专栏

问题：使用@mousemove绑定事件拖拽速度过快有严重的卡顿，只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了。

解决办法：结合原生js实现拖动

一，项目中的组件

<template>
  <div>
    <div class="ctn ctn1">
      <div class="sub sub1" v-for="(site, index) in list" :key="index">
        <div
          class="dragCtn fixed"
          @mousedown="mousedown(index, $event)"
          @mouseup="mouseup(index, $event)"
        >
          {{ site.name }}
          <span>{{site.x}},{{site.y}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "位置1",
          index: 0,
          x:0,
          y:0
        },
         {
          name: "位置2",
          index: 1,
           x:0,
          y:0
        },
         {
          name: "位置3",
          index: 2,
           x:0,
           y:0
        },
      ],
      sb_bkx: 0,
      sb_bky: 0,
      x:0,
      y:0
    };
  },
  methods: {
    mousedown(index, event) {
      let that = this;
      var event = event || window.event;
      var _target = event.target;
      var startx = event.clientX;
      var starty = event.clientY;
      var sb_bkx = startx - event.target.offsetLeft;
      var sb_bky = starty - event.target.offsetTop;
      var ww = document.documentElement.clientWidth;
      var wh = window.innerHeight;
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        event.returnValue = false;
      }
      document.onmousemove = function (ev) {
        var event = ev || window.event;
        var scrolltop =document.documentElement.scrollTop || document.body.scrollTop;
        if (
          event.clientY < 0 ||
          event.clientX < 0 ||
          event.clientY > wh ||
          event.clientX > ww
        ) {
          return false;
        }
        var endx = event.clientX - sb_bkx;
        var endy = event.clientY - sb_bky;
        _target.style.left = endx + "px";
        _target.style.top = endy + "px";
        that.list[index].x = endx;
        that.list[index].y = endy;

        console.log(endx,endy)
      };
    },
    mouseup(e) {
      document.onmousemove = null;
    },
  },
};
</script>
<style lang='less' scoped>
.ctn {
  line-height: 50px;
  cursor: pointer;
  font-size: 20px;
  text-align: center;
  float: left;
  border: 1px solid red;
}
.sub:hover {
  background: #e6dcdc;
  color: white;
  width: 100px;
}
.ctn1 {
  border: 1px solid green;
  width: 100px;
}
.ctn2 {
  border: 1px solid black;
  width: 100px;
  margin-left: 50px;
}
.fixed {
  width: 100px;
  height: 100px;
  position: fixed;
  background: red;
  left: 10px;
  top: 15px;
  cursor: move;
  border-radius: 50px;

}
</style>

二，单页面中的使用

<!DOCTYPE html>
<html>
	<head>
		<title>vue结合原生js实现拖动</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="ctn ctn1">
				<div class="sub sub1" v-for="(site, index) in list" :key="index">
					<div class="dragCtn fixed" @mousedown="mousedown(index, $event)" @mouseup="mouseup(index, $event)">
						{{ site.name }}
						<span>{{site.x}},{{site.y}}</span>
					</div>
				</div>
			</div>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					list: [{
							name: "位置1",
							index: 0,
							x: 0,
							y: 0
						},
						{
							name: "位置2",
							index: 1,
							x: 0,
							y: 0
						},
						{
							name: "位置3",
							index: 2,
							x: 0,
							y: 0
						},
					],
					sb_bkx: 0,
					sb_bky: 0,
					x: 0,
					y: 0
				},
				methods: {
					mousedown: function(index, event) {
						let that = this;
						var event = event || window.event;
						var _target = event.target
						var startx = event.clientX;
						var starty = event.clientY;
						var sb_bkx = startx - event.target.offsetLeft;
						var sb_bky = starty - event.target.offsetTop;
						var ww = document.documentElement.clientWidth;
						var wh = window.innerHeight;
						if (event.preventDefault) {
							event.preventDefault();
						} else {
							event.returnValue = false;
						};
						document.onmousemove = function(ev) {
							var event = ev || window.event;
							var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
							if (event.clientY < 0 || event.clientX < 0 || event.clientY > wh || event.clientX >
								ww) {
								return false;
							};
							var endx = event.clientX - sb_bkx;
							var endy = event.clientY - sb_bky;
							_target.style.left = endx + 'px';
							_target.style.top = endy + 'px';
							that.list[index].x = endx;
							that.list[index].y = endy;

							console.log(endx, endy)
						}
					},
					mouseup: function(e) {
						document.onmousemove = null;
					}
				}
			})
		</script>
		<style>
			.ctn {
				line-height: 50px;
				cursor: pointer;
				font-size: 20px;
				text-align: center;
				float: left;
			}

			.sub:hover {
				background: #e6dcdc;
				color: white;
				width: 100px;
			}

			.ctn1 {
				border: 1px solid green;
				width: 100px;
			}

			.ctn2 {
				border: 1px solid black;
				width: 100px;
				margin-left: 50px;
			}

			.fixed {
				width: 100px;
				height: 100px;
				position: fixed;
				background: red;
				left: 10px;
				top: 15px;
				cursor: move;
				border-radius: 50px;
			}
		</style>
	</body>
</html>