threejs-viewer-18

init() {
    // ... other code snippet

    this.buildDragEvent();
}

// ... other code snippet
// ref: https://www.w3schools.com/howto/howto_js_draggable.asp
buildDragEvent() {
    const panel = this;
    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    if (panel.titlebar) {
        // if present, the header is where you move the DIV from:
        panel.titlebar.addEventListener('mousedown', dragMouseDown);
    } else {
        // otherwise, move the DIV from anywhere inside the DIV:
        panel.container.addEventListener('mousedown', dragMouseDown);
    }

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.addEventListener('mouseup', closeDragElement);
        // call a function whenever the cursor moves:
        document.addEventListener('mousemove', elementDrag);
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        panel.container.style.top = (panel.container.offsetTop - pos2) + "px";
        panel.container.style.left = (panel.container.offsetLeft - pos1) + "px";
    }

    function closeDragElement() {
        // stop moving when mouse button is released:
        document.removeEventListener('mouseup', closeDragElement);
        document.removeEventListener('mousemove', elementDrag);
    }
}