js拖动元素改变滚动条位置

最新推荐文章于 2024-07-22 17:30:43 发布

one.dream

最新推荐文章于 2024-07-22 17:30:43 发布

阅读量1.2w

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_44472722/article/details/103793273

版权

Javascript 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>Document</title>
    <style>
        #dragWrap {
            width: 300px;
            height: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="dragWrap">
    <img src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" alt="">
</div>
<script>
    // $(function () {

        var drag = function drag() {
            this.dragWrap = $("#dragWrap");
            this.init.apply(this, arguments);
        };
        drag.prototype = {
            constructor: drag,
            _dom: {},
            _x: 0,
            _y: 0,
            _top: 0,
            _left: 0,
            move: false,
            down: false,
            init: function () {
                this.bindEvent();
            },
            bindEvent: function () {
                var t = this;
                $('body').on('mousedown', '#dragWrap', function (e) {
                    e && e.preventDefault();
                    if (!t.move) {
                        t.mouseDown(e);
                    }
                });
                $('body').on('mouseup', '#dragWrap', function (e) {
                    t.mouseUp(e);
                });

                $('body').on('mousemove', '#dragWrap', function (e) {
                    if (t.down) {
                        t.mouseMove(e);
                    }
                });
            },
            mouseMove: function (e) {
                e && e.preventDefault();
                this.move = true;
                var x = this._x - e.clientX,
                    y = this._y - e.clientY,
                    dom = document.getElementById('dragWrap');
                dom.scrollLeft = (this._left + x);
                dom.scrollTop = (this._top + y);
            },
            mouseUp: function (e) {
                e && e.preventDefault();
                this.move = false;
                this.down = false;
                this.dragWrap.css('cursor', '');
            },
            mouseDown: function (e) {
                this.move = false;
                this.down = true;
                this._x = e.clientX;
                this._y = e.clientY;
                this._top = document.getElementById('dragWrap').scrollTop;
                this._left = document.getElementById('dragWrap').scrollLeft;
                this.dragWrap.css('cursor', 'move');
            }
        };
        var drag = new drag();
    // });
</script>
</body>
</html>

有想换工作的同学可以找我内推哦不低于15k（前端，java，测试）

在这里插入图片描述

one.dream

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js拖动元素改变滚动条位置

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://...
复制链接

扫一扫

专栏目录