如何通过拖动其中一个孩子来调整父级的大小？

Question

基本上我想通过拖动蓝色的东西来调整绿色框的大小。

我正在尝试使用OffsetLeft，但无效。 Firefox中也没有触发拖动事件。

我的代码在这里：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>

和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;
}

那我怎么能这样做，也是cross-browser compatible？ 我需要一个html5 + js解决方案 - 因为我将使用另一种名为elm的编程语言的逻辑。我只能从DOM中读取内容，而不是改变它。所以我无法使用已经构建的库，如Jquery。

感谢您的关注。

Answer 1

您应该使用../../../myprogram.rc来获取正确的值（并使用单位:)

这不适用于Firefox：https://bugzilla.mozilla.org/show_bug.cgi?id=505521

event.pageX

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;
}

旧的时尚方式可以在Firefox中使用：create-a-draggable-div-in-native-javascript