How to make a draggable div resize-able on all 4 corners with pure javascript?

2 thoughts on “How to make a draggable div resize-able on all 4 corners with pure javascript?”

1. So, you want the resize handle to appear on all four corners? That’ll require some bounds checking.

   You can modify the offset check in drag to account for any corner and handle the drag as a resize event instead. The code somewhat works for top-left and bottom-right resizing, but doe not work too well with the opposite corners. This is a start.

   This is a start:

   const cursor = document.querySelector('#cursor');
   const cornerThreshold = 4;
   
   const dragStart = e => {
     const [ horz, vert ] = getDirection(e, cornerThreshold);
     const bounds = e.target.getBoundingClientRect();
     const cursor = getCursorType(e);
     
     if (cursor === 'grab') {
       e.target.dataset.isDragging = true;
     } else {
       e.target.dataset.isResizing = true;
     }
   
     e.target.dataset.startWidth = bounds.width;
     e.target.dataset.startHeight = bounds.height;
     e.target.dataset.originX = e.clientX;
     e.target.dataset.originY = e.clientY;
     e.target.dataset.offsetX = e.clientX - e.target.offsetLeft;
     e.target.dataset.offsetY = e.clientY - e.target.offsetTop;
     e.target.dataset.dirHorz = horz;
     e.target.dataset.dirVert = vert;
     e.target.style.zIndex = 999;
   };
   
   const dragEnd = e => {
     delete e.target.dataset.isDragging;
     delete e.target.dataset.offsetX;
     delete e.target.dataset.offsetY;
     delete e.target.dataset.originX;
     delete e.target.dataset.originY;
     delete e.target.dataset.startWidth;
     delete e.target.dataset.startHeight;
     delete e.target.dataset.dirHorz;
     delete e.target.dataset.dirVert;
     delete e.target.dataset.resizeDirection;
     
     e.target.style.removeProperty('z-index');
     e.target.style.removeProperty('cursor');
   };
   
   const drag = e => {
     e.target.style.cursor = getCursorType(e);
     cursor.textContent = `(${e.clientX}, ${e.clientY})`;
     if (e.target.dataset.isDragging) {
       e.target.style.left = `${e.clientX - parseInt(e.target.dataset.offsetX, 10)}px`;
       e.target.style.top = `${e.clientY - parseInt(e.target.dataset.offsetY, 10)}px`;
     } else if (e.target.dataset.isResizing) {
       const bounds = e.target.getBoundingClientRect();
       
       const startWidth = parseInt(e.target.dataset.startWidth, 10);
       const startHeight = parseInt(e.target.dataset.startWidth, 10);
       const deltaX = e.clientX - parseInt(e.target.dataset.originX, 10);
       const deltaY = e.clientY - parseInt(e.target.dataset.originY, 10);
       const originX = parseInt(e.target.dataset.originX, 10);
       const originY = parseInt(e.target.dataset.originY, 10);
       const dirHorz = parseInt(e.target.dataset.dirHorz, 10);
       const dirVert = parseInt(e.target.dataset.dirVert, 10);
       
       if (dirHorz < 0) {
         e.target.style.left = `${originX + deltaX}px`;
         e.target.style.width = `${startWidth - deltaX}px`
       } else if (dirHorz > 0) {
         e.target.style.width = `${startWidth + deltaX}px`;
       }
       if (dirVert < 0) {
         e.target.style.top = `${originY + deltaY}px`;
         e.target.style.height = `${startHeight - deltaY}px`;
       } else if (dirVert > 0) {
         e.target.style.height = `${startHeight + deltaY}px`;
       }
     }
   };
   
   const focus = e => { };
   
   const unfocus = e => { e.target.style.removeProperty('cursor'); };
   
   const getDirection = (e, threshold) => {
     const bounds = e.target.getBoundingClientRect();
     const offsetX = e.clientX - e.target.offsetLeft;
     const offsetY = e.clientY - e.target.offsetTop;
   
     const isTop = offsetY <= threshold;
     const isLeft = offsetX <= threshold;
     const isBottom = offsetY > (bounds.height - threshold);
     const isRight = offsetX > (bounds.width - threshold);
     
     if      (isTop    && isLeft)  return [ -1, -1 ];
     else if (isTop    && isRight) return [ -1,  1 ];
     else if (isBottom && isLeft)  return [  1, -1 ];
     else if (isBottom && isRight) return [  1,  1 ];
     else                          return [  0,  0 ];
   };
   
   const getCursorType = (e) => {
     if (e.target.dataset.isDragging) {
       return 'grabbing';
     } else {
       const [ horz, vert ] = getDirection(e, cornerThreshold);
   
       const isTop = vert === -1;
       const isLeft = horz === -1;
       const isBottom = vert === 1;
       const isRight = horz === 1;
     
       if ((isTop && isLeft) || (isBottom && isRight)) return 'nwse-resize';
       if ((isTop && isRight) || (isBottom && isLeft)) return 'nesw-resize';
     }
     return 'grab';
   };
   
   document.querySelectorAll('.draggable').forEach(draggable => {
    draggable.addEventListener('mousedown', dragStart);
    draggable.addEventListener('mouseup', dragEnd);
    draggable.addEventListener('mousemove', drag);
    draggable.addEventListener('mouseenter', focus);
    draggable.addEventListener('mouseleave', unfocus);
   });

   html, body {
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100%;
   }
   
   .container {
     position: relative;
     width: 60%;
     height: 60%;
     border: thin solid grey;
   }
   
   .square {
     position: absolute;
     height: 2em;
     width: 2em;
   }
   
   .color-red { background: red; }
   .color-blue { background: blue; }
   .color-green { background: green; }
   
   #square-1 { top:  10px; left:  10px; }
   #square-2 { top:  50px; left:  50px; }
   #square-3 { top: 100px; left: 100px; }

   <div class="container">
     <div id="square-1" class="square color-red draggable resizable"></div>
     <div id="square-2" class="square color-blue draggable resizable"></div>
     <div id="square-3" class="square color-green draggable resizable"></div>
   </div>
   <br />
   <div>Cursor: <span id="cursor">(0, 0)</span></div>

   Reply

2. Well if you want to make it nice and easy you could use jQuery to help it resize would probably be the easiest way. Then after you learn how to do it with jQuery you could do it with pure js.

   Reply