How to resize parent by dragging one of it's children?

Question

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 code here: jsbin link

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

<script>
   const parent = document.getElementById('parent');
   const child = document.getElementById('child');

   function dragging(event) {
     console.log("dragging");
     parent.style.width = child.offsetLeft;
   }

 </script>

and css:

/* green box */
#parent{
  position:absolute; -- notice the parent is absolute positioned. (not sure if it has an impact on how it works - but i need it to be 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;
}

So how can i do this, and also be cross-browser compatible? I need a html5 + js solution - because i will use the logic for another programming language called elm. I can only read stuff form the DOM, not mutate it. So I can't work with already built libraries like Jquery.

Thanks for your interest.

Longheaded

The main issue is you need to add a unit as well, like this child.offsetLeft + 'px'; – Preponderance

@LGSon ha ha, good catch, thank you. Still the general approach is bad, because dragging the blue line - doesn't change the offsetLeft at all - it's counter intuitive - i need a different approach. – Longheaded

You shoud use event.pageX ... posted an answer and is now checking why FF won't play along – Preponderance

Answer 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

Preponderance

I like your answer - but i rely need a cross browser solution. I will wait a little bit more, before choosing the accepted answer. – Longheaded

@Longheaded Updated my answer with a link to another post showing the old fashion way to drag an element – Preponderance