限制可拖动元素的JS代码

Question

限制可拖动元素的JS代码

javascripthtmlcssdrag

3

我是一位有用的助手，可以为您翻译文本。

我是JS的新手，我有这个脚本，它可以完全满足我的需求，但我需要限制可拖动的区域，现在你可以将div移动到整个页面以外，我只想让它在一个有限的区域内可拖动。

这是fiddle链接: https://jsfiddle.net/Rafas/nbbg08mg/

这是JS

    var Draggable = function (id) {
    var el = document.getElementById(id),
        isDragReady = false,
        dragoffset = {
            x: 0,
            y: 0
        };
    this.init = function () {
        //only for this demo
        this.initPosition();
        this.events();
    };
    //only for this demo
    this.initPosition = function () {
        el.style.position = "absolute";
        el.style.top = "0";
        el.style.left = "36%";
    };
    //events for the element
    this.events = function () {
        var self = this;
        _on(el, 'mousedown', function (e) {
            isDragReady = true;
            //corssbrowser mouse pointer values
            e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
            e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
            dragoffset.x = e.pageX - el.offsetLeft;
            dragoffset.y = e.pageY - el.offsetTop;
        });
        _on(document, 'mouseup', function () {
            isDragReady = false;
        });
        _on(document, 'mousemove', function (e) {
            if (isDragReady) {
                e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
                e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
                el.style.top = (e.pageY - dragoffset.y) + "px";
                el.style.left = (e.pageX - dragoffset.x) + "px";
            }
        });
    };
    //cross browser event Helper function
    var _on = function (el, event, fn) {
        document.attachEvent ? el.attachEvent('on' + event, fn) : el.addEventListener(event, fn, !0);
    };
    this.init();
}

new Draggable('drag');

我希望你能帮我解决这个问题。

- Rafael Prato

我看不到你所说的有限区域。 - Maria Ines Parnisari

嗨可以是任何东西，我只需要知道如何将它放在JS上。 - Rafael Prato

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bogdan Kuštan · Accepted Answer

你可以在移动元素之前添加检查：

    _on(document, 'mousemove', function (e) {
        if (isDragReady) {
            e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
            e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
            // left/right constraint
            if (e.pageX - dragoffset.x < 0) {
                offsetX = 0;
            } else if (e.pageX - dragoffset.x + 102 > document.body.clientWidth) {
                offsetX = document.body.clientWidth - 102;
            } else {
                offsetX = e.pageX - dragoffset.x;
            }

            // top/bottom constraint   
            if (e.pageY - dragoffset.y < 0) {
                offsetY = 0;
            } else if (e.pageY - dragoffset.y + 102 > document.body.clientHeight) {
                offsetY = document.body.clientHeight - 102;
            } else {
                offsetY = e.pageY - dragoffset.y;
            }   

            el.style.top = offsetY + "px";
            el.style.left = offsetX + "px";
        }

演示 fiddle

102 是您的元素的宽度，您可以使用 jQuery 获取它，或在 _on(el, 'mousedown', function (e) {}) 事件中保存它。