• 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>
    View Code

  • 相关阅读:
    OpenGL------光照+染色
    sicily 1345 能量项链
    sicily 1193 Up the Stairs
    sicily 1172 Queens, Knights and Pawns
    sicily 1206 Stacking Cylinders
    模拟退火算法解tsp问题
    js对象的属性可以是一个变量
    vue中/deep/的使用
    MySQL中DATEDIFF函数使用
    js中的this
  • 原文地址:https://www.cnblogs.com/dafei4/p/13864056.html
Copyright © 2020-2023  润新知