Vue 中实现JavaScript 拖动元素改变滚动条位置

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>