Vue 中实现JavaScript 拖动元素改变滚动条位置
主要使用属性: clientX clientY scrollTop() scrollLeft()
<template> <div> <div id="dragWrap" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove"> <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""> </div> </div> </template> <script> export default { data() { return { _x: 0, _y: 0, _top: 0, _left: 0, move: false, down: false, } }, methods: { mousedown(e) { e && e.preventDefault(); let dom = $("#dragWrap"); this.move = false; this.down = true; this._x = e.clientX; this._y = e.clientY; this._top = dom.scrollTop(); this._left = dom.scrollLeft(); dom.css('cursor', 'move'); }, mouseup(e) { e && e.preventDefault(); this.move = false; this.down = false; $("#dragWrap").css('cursor', ''); }, mousemove(e) { this.move = true; if (this.down) { let x = this._x - e.clientX; let y = this._y - e.clientY; let dom = $("#dragWrap"); dom.scrollLeft(this._left + x); dom.scrollTop(this._top + y); } } }, }; </script> <style scoped> #dragWrap { width: 200px; height: 200px; overflow: auto; } </style>