How To Resize Parent By Dragging One Of It's Children?

Essentially i want to resize the green box by dragging the blue thing. I'm trying to use OffsetLeft but is not working. also the drag event doesn't fire in Firefox. And i have the

Solution 1:

You should use event.pageX to get the correct value (and use a unit :)

This won't work on Firefox though: https://bugzilla.mozilla.org/show_bug.cgi?id=505521

const parent = document.getElementById('parent');
const child = document.getElementById('child');

function dragging(event) {
  console.log("dragging");
  parent.style.width = event.pageX + 'px';
}

function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

/* green box */

#parent {
  position: absolute;
  top: 100;
  left: 100;
  background-color: green;
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: flex-end;
}


/* blue bar */

#child {
  width: 5px;
  background-color: blue;
  cursor: e-resize;
}

<div id="parent">

  <div draggable="true" id="child" ondragstart="dragStart(event)" ondrag="dragging(event)"></div>

</div>
<div id="demo"></div>

---

The old fashion way will work in Firefox though: create-a-draggable-div-in-native-javascript