CODEWITHSUNDEEP
javascripthtmlcssdrag
Rafael Prato
Rafael Prato

Reputation: 172

Limit a Draggable Element JS

i new in JS, i have this script that do exactly what i want, but i need to limit the draggable area, right now you can move the div all the way through the body and more i just want to be draggable inside an limited area.

This is the fiddle: https://jsfiddle.net/Rafas/nbbg08mg/

This is the 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');

I Hope you can help me with this.

Upvotes: 3

Views: 8454

Answers (1)

Bogdan Kuštan
Bogdan Kuštan

Reputation: 5577

You can add check before moving element:

    _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";
        }

Demo fiddle

102 is width of Your element, You can get it with jQuery, or save it on _on(el, 'mousedown', function (e) {}) event.

Upvotes: 4

Related Questions