js左右拖动画布、js鼠标左右拖动改变滚动条位置

中间绿色画布，鼠标左键长按可以左右拖动

 

<template>
	<div id="div">
		<!-- 左边元素 -->
		<div id="div1">
		</div>
		<!-- 中间画布 -->
		<div id="div2">
			<div id="container"></div>
		</div>
		<!-- 右边元素 -->
		<div id="div3">
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		watch: {},
		mounted() {
			// 添加拖动事件
			this.dragMoveX("#div2");
		},
		methods: {
			dragMoveX(obj) {
				// 鼠标是否在长按点击
				var flag;
				// 鼠标点击下的位置信息
				var downX, downY;
				// 首次点击滚顶条位置信息
				var scrollLeft, scrollTop;
				// 鼠标按下事件
				$(document.body).on("mousedown", obj, function(event) {
					// 鼠标点击
					flag = true;
					// 获取首次位置信息
					downX = event.clientX;
					downY = event.clientY;
					// 获取滚动条位置信息
					scrollLeft = $(this).scrollLeft();
					scrollTop = $(this).scrollTop();
					// 改变鼠标位置
					$(obj).css("cursor", "grabbing");
				});
				// 移动鼠标事件
				$(obj).on("mousemove", function(event) {
					if (flag) {
						// 鼠标样式
						$(obj).css("cursor", "grabbing");
						// 获取鼠标位置信息并 减去 距离首次点击的位置信息
						var scrollX = event.clientX - downX;
						var scrollY = event.clientY - downY;
						// 移动滚动条位置
						$(this).scrollLeft(scrollLeft - scrollX);
						$(this).scrollTop(scrollTop - scrollY);
					} else {
						// 将鼠标改为默认样式
						$(obj).css("cursor", "default");
					}
				});
				// 松开鼠标事件
				$(obj).on("mouseup", function() {
					// 修改鼠标点击事件状态
					flag = false;
					// 将鼠标改为默认样式
					$(obj).css("cursor", "default");
				});
				// 鼠标移出事件
				$(obj).on("mouseleave", function(event) {
					// 修改鼠标点击事件状态
					flag = false;
					// 将鼠标改为默认样式
					$(obj).css("cursor", "default");
					if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
						flag = false;
					}
					if (event.pageY < 0 || event.pageY > document.body.offsetHeight) {
						flag = false;
					}
				});
			}

		}
	}
</script>
<!-- scoped="scoped" -->
<style>
	html,
	body,
	#div,
	#app {
		width: 100%;
		height: 100%;
	}

	#div {
		background-color: #333;
	}

	#div1 {
		background-color: #aaa;
		height: 100%;
		width: 20%;
		float: left;
	}

	#div2 {
		background-color: #438d43;
		height: 100%;
		width: 60%;
		float: left;
		overflow: auto;
	}

	#container {
		width: 5000px;
		height: 5000px;
	}

	#div3 {
		width: 20%;
		height: 100%;
		background-color: #123abc;
	}
</style>