Javascript Make Div Draggable AND Resizable

Javascript Code to Make a Div Draggable and Resize the Div Height and Width via Mouse Drag

Home Short:

As as example of the Javascript code to make a div moveable and resizable, This div can be moved and resized.

DRAG ME

This is an example of a dragabble div draggable via a title bar.

The code below is all that is needed to drag around and resize any div (or other element). Much less code and much less complicated than many other websites would have you believe, especially the code to be able to resize an element.

dragInit(document.querySelector('#divdrag1'));
dragInit(document.querySelector('#divOfElementYouWantToDragAndResize');

function dragInit
(
 elemToDrag,
 elemToDragBy = null
)
{
 let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        
 
 if(elemToDragBy == null){
    elemToDragBy = elemToDrag;
 }
  
  // the required css code to resize
 elemToDrag.style.overflow = 'auto';
 elemToDrag.style.position = 'absolute';
 elemToDrag.style.resize = 'both';
             
 elemToDragBy.style.cursor = 'grab';
     
 elemToDragBy.onmousedown =(e)=> {
    
        // see if the mouse cursor is at lower right corner
        // above the resize graphic, if so, set the variable
        // [currentlyResizing] to true
       let rectActiveElem = elemToDrag.getBoundingClientRect(),
           x = parseInt(e.clientX - rectActiveElem.left),
           y = parseInt(e.clientY - rectActiveElem.top),
           rightEdge = ((elemToDrag.offsetWidth - x) < 15),
           bottomEdge = ((elemToDrag.offsetHeight - y) < 15),
           currentlyResizing = (rightEdge && bottomEdge);
           
        // if [currentlyResizing]we don't want to
        // move [elemToDrag] we want to resize it
       if(!currentlyResizing){
            elemToDragBy.style.cursor = 'grabbing';
            e = (e || window.event);
            e.preventDefault();
            pos3 = e.clientX;
            pos4 = e.clientY;
             
             // stop dragging
            document.onmouseup =()=>  {
               document.onmouseup = null;
               document.onmousemove = null;
               elemToDragBy.style.cursor = 'grab';
            };

// start dragging
            document.onmousemove =(e)=> {
               e = (e || window.event);
               e.preventDefault();
               pos1 = (pos3 - e.clientX);
               pos2 = (pos4 - e.clientY);
               pos3 = e.clientX;
               pos4 = e.clientY;
               elemToDrag.style.top = (elemToDrag.offsetTop - pos2) + "px";
               elemToDrag.style.left = (elemToDrag.offsetLeft - pos1) + "px";

}; // document.onmousemove
        }; // !currentlyResizing
  }; // elemToDrag.onmousedown     
} // dragInit

source code home