Breaking News: Grepper is joining You.com. Read the official announcement!

how to make element draggable inside parent element

Homely Hamerkop answered on January 12, 2023 Popularity 4/10 Helpfulness 2/10

answer how to make element draggable inside parent element

how to make element draggable inside parent element

Comment

// this code is written by DeveloperRimon,,, https://www.youtube.com/@DeveloperRimon
const parent = document.querySelector('.parent-div');
const child = document.querySelector('.draggable-div');


/**
 * @param {parentElement} parent 
 * @param {childElement} child 
 */

function init(parent, child) {
    let isMoving = false; 
    child.onmousedown = function(e) {
        isMoving = true;
        let parentRect = parent.getBoundingClientRect();
        let sx = e.clientX - parentRect.left - e.offsetX;
        let sy = e.clientY - parentRect.top - e.offsetY; 
        let ofX = e.offsetX;
        let ofY = e.offsetY;
        this.style.left = `${sx}px`;
        this.style.top = `${sy}px`; 
        this.style.pointerEvents = 'none';
        parent.onmousemove = function(e) {
            let parentRect1 = parent.getBoundingClientRect();
            let childRect1 = child.getBoundingClientRect();
            if(isMoving) {
                let cx = e.offsetX - ofX;
                let cy = e.offsetY - ofY;
                if(cx < 1) cx = 0;
                if(cy < 1) cy = 0;   
                if(cx + childRect1.width > parentRect1.width) cx =   parentRect1.width - childRect1.width
                if(cy + childRect1.height > parentRect1.height) cy =   parentRect1.height - childRect1.height
                child.style.left = `${cx}px`;
                child.style.top = `${cy}px`;             
            }
        }
    }
    window.onmouseup = function() {
        child.style.pointerEvents = 'all';
        isMoving = false
    }    
}
// parent elment, child element;
init(parent, child)

Popularity 4/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: draggable element javascript parent

Link to this answer
Share Copy Link

Contributed on Jan 12 2023

Homely Hamerkop

0 Answers Avg Quality 2/10

how to make element draggable inside parent element

Contents

More Related Answers

how to make element draggable inside parent element

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.