关于vue中div拖拽实现

大神原文链接：https://blog.csdn.net/qq_43610925/article/details/125696789

1、在utils文件下创建divDrag文件夹，里面在创建index.js、divDrag.js两个js文件。

2、divDrag.js内容

注：【里面引入store是因为我需要记录更新每次移动的位置，所以我用vuex；具体看使用场景是否使用，不引入store和使用下方代码中的store.commit方法，也可以正常使用】

// divDrag.js
import store from '@/store'

export default {
	bind (el) {
		el.addEventListener("mousedown", handleMouseDown);
		window.addEventListener("mouseup", handleMouseUp);
		window.addEventListener("mousemove", handleMouseMove);

		let isDragging = false;
		let mouseOffset = { x: 0, y: 0 };

		function handleMouseDown (e) {
			e.preventDefault();
			e.target.style.cursor = 'move'
			isDragging = true;
			const offsetX = e.clientX - el.offsetLeft;
			const offsetY = e.clientY - el.offsetTop;
			mouseOffset = { x: offsetX, y: offsetY };
		}

		function handleMouseUp (e) {
			isDragging = false;
			e.target.style.cursor = 'default'
		}

		function handleMouseMove (e) {
			if (!isDragging) return;
			e.target.style.cursor = 'move'
			const posX = e.clientX - mouseOffset.x;
			const posY = e.clientY - mouseOffset.y;
			el.style.left = `${posX}px`;
			el.style.top = `${posY}px`;
			store.commit("videoOxc/SET_DRAGDIV", 'left:' + el.style.left + ',top:' + el.style.top)
		}

		el._dragHandlers = {
			handleMouseDown,
			handleMouseUp,
			handleMouseMove,
		};
	},
	unbind (el) {
		const { handleMouseDown, handleMouseUp, handleMouseMove } = el._dragHandlers || {};
		el.removeEventListener("mousedown", handleMouseDown);
		window.removeEventListener("mouseup", handleMouseUp);
		window.removeEventListener("mousemove", handleMouseMove);
	},
};

3、index.js内容

// divDrag/index.js
import divDrag from "./divDrag";

const install = function (Vue) {
	Vue.directive("divDrag", divDrag);
};

if (window.Vue) {
	Vue.use(install); // eslint-disable-line
}

export default install;

4、在main.js中引入divDrag

import divDrag from "@/utils/divDrag"; // divDrag拖拽
Vue.use(divDrag);

5、项目中使用，在要拖拽的div上加上v-div-drag指令。

注：【最好在当前div的父元素上设置position: relative;】