html、vue拖拽效果

qq_39325568

已于 2024-04-03 15:18:59 修改

阅读量200

点赞数 2

文章标签： html vue.js javascript

于 2024-04-03 15:13:46 首次发布

本文链接：https://blog.csdn.net/qq_39325568/article/details/137346672

版权

效果图![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/92dbeab81fb842ca8f9f22b70c619f33.png

直接复制即可使用
html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#box {
		  position: absolute;
		  left: 100px;
		  top: 100px;
		  padding: 5px;
		  background: #fff;
		  font-size: 12px;
		  box-shadow: 0px 2px 10px rgba(0, 0, 0, .1);
		}
		#main {
		  border: 1px solid #7700FF;
		  background: white;
		}
		#bar {
		  line-height: 24px;
		  background: #beceeb;
		  border-bottom: 1px solid #7700FF;
		  padding-left: 5px;
		  cursor: move;
		}
		#content {
		  width: 200px;
		  height: 150px;
		  padding: 10px 5px;
		}
	</style>
	<body>
		<div id="box">
		  <div id="main">
		    <div id="bar">拖拽</div>
		    <div id="content">内容……</div>
		  </div>
		</div>
	</body>
	
	<script>
		var params = {
		  left: 0,
		  top: 0,
		  currentX: 0,
		  currentY: 0,
		  flag: false
		};
		//获取相关CSS属性
		var getCss = function (o, key) {
		  return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
		};
		
		//拖拽的实现
		var startDrag = function (bar, target, callback) {
		  if (getCss(target, "left") !== "auto") {
		    params.left = getCss(target, "left");
		  }
		  if (getCss(target, "top") !== "auto") {
		    params.top = getCss(target, "top");
		  }
		  //o是移动对象
		  bar.onmousedown = function (event) {
		    params.flag = true;
		    if (!event) {
		      event = window.event;
		      //防止IE文字选中
		      bar.onselectstart = function () {
		        return false;
		      }
		    }
		    var e = event;
		    params.currentX = e.clientX;
		    params.currentY = e.clientY;
		  };
		  document.onmouseup = function () {
		    params.flag = false;
		    if (getCss(target, "left") !== "auto") {
		      params.left = getCss(target, "left");
		    }
		    if (getCss(target, "top") !== "auto") {
		      params.top = getCss(target, "top");
		    }
		  };
		  document.onmousemove = function (event) {
		    var e = event ? event : window.event;
		    if (params.flag) {
		      var nowX = e.clientX, nowY = e.clientY;
		      var disX = nowX - params.currentX, disY = nowY - params.currentY;
		      target.style.left = parseInt(params.left) + disX + "px";
		      target.style.top = parseInt(params.top) + disY + "px";
		
		      if (typeof callback == "function") {
		        callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
		      }
		
		      if (event.preventDefault) {
		        event.preventDefault();
		      }
		      return false;
		    }
		  }
		};
		onload = function () {
		  startDrag(bar, box);
		};
	</script>
</html>

vue：

<template>
	<div id="box" ref="boxRef" @mousedown="handleMouseDown" :style="{ left: params.left + 'px', top: params.top + 'px' }">
		<div id="main">
			<div id="bar" ref="barRef">拖拽</div>
			<div id="content">内容……</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import { ref, onMounted } from 'vue';

	const params = ref({
		left: 0,
		top: 0,
		currentX: 0,
		currentY: 0,
		flag: false
	});

	const boxRef = ref(null);
	const barRef = ref(null);

	const getCss = (o, key) => {
		return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
	};

	const handleMouseDown = (event) => {
		params.flag = true;
		if (!event) {
			event = window.event;
			barRef.value.onselectstart = () => false;
		}
		const e = event;
		params.currentX = e.clientX;
		params.currentY = e.clientY;
		params.left = parseInt(getCss(boxRef.value, "left")) || 0;
		params.top = parseInt(getCss(boxRef.value, "top")) || 0;
	};

	const handleMouseUp = () => {
		params.flag = false;
	};

	const handleMouseMove = (event) => {
		const e = event ? event : window.event;
		if (params.flag) {
			const nowX = e.clientX, nowY = e.clientY;
			const disX = nowX - params.currentX, disY = nowY - params.currentY;
			boxRef.value.style.left = params.left + disX + "px";
			boxRef.value.style.top = params.top + disY + "px";

			if (event.preventDefault) {
				event.preventDefault();
			}
			return false;
		}
	};

	onMounted(() => {
		barRef.value.onmousedown = handleMouseDown;
		document.onmouseup = handleMouseUp;
		document.onmousemove = handleMouseMove;
	});
</script>


<style scoped>
	#box {
	  position: absolute;
	  padding: 5px;
	  background: #fff;
	  font-size: 12px;
	  box-shadow: 0px 2px 10px rgba(0, 0, 0, .1);
	}
	#main {
	  border: 1px solid #7700FF;
	  background: white;
	}
	#bar {
	  line-height: 24px;
	  background: #beceeb;
	  border-bottom: 1px solid #7700FF;
	  padding-left: 5px;
	  cursor: move;
	}
	#content {
	  width: 200px;
	  height: 150px;
	  padding: 10px 5px;
	}
</style>