javascript - 拖放后改变高度

Question

全部，

我有一个圆圈，我将其从上部 div 拖放到底部 div。请看 fiddle 。单击底部的圆圈后，我尝试使用输入按钮更改高度。输入按钮位于顶部和底部 div 之间，并使用增量值 5。

但是，我的事件处理程序在从 5 增加到 10 后不会更改高度值。

我的目标是允许更改高度，尤其是在我在底部和 div 中放置一个圆圈并选择该圆圈以模拟激活之后。

我尝试将事件处理程序与圆圈和输入按钮相关联的方式有问题吗？

https://jsfiddle.net/mdevera/ff1bfpsd/

destinationContainer.addEventListener("click", change);

function change(event) {
  activeShape = event.srcElement;
}

function changeHeight(event) {
  //var height = (parseInt(activeShape.clientHeight, 10) +        parseInt(event.target.value, 10)) + "px";
  activeShape.style.height = event.target.value + "px";
}

Answer 1

问题是 #destination 元素的 click 事件监听器仅在单击时调用 change 函数。换句话说，当您拖放元素时，change 函数不会被触发，因为没有触发任何点击事件。因此，change 函数中定义的 activeShape 变量不指向元素，因为从未调用过 change 函数。

另一种方法是使用 :last-child pseudo class 选择 #destination 元素的最后一个子元素。 .最后一个子元素始终是附加的最后一个元素，这意味着您在更改高度时始终以最近放置的元素为目标。

Updated Example

function changeHeight(event) {
  var activeShape = destinationContainer.querySelector(':last-child');

  if (activeShape !== null) {
    activeShape.style.height = event.target.value + "px";
  }
}

---

阅读您的评论后:

除了上述更改之外，您似乎还在寻找 input event而不是 change 事件。 input 事件在元素值更改时同步触发，而 change event在 blur 上触发(这是当焦点从该字段中移除时)。

Updated Example

var destinationContainer = document.querySelector("#destination");
var input = document.querySelector('#height-input');

input.addEventListener('input', function (event) {
  var activeShape = destinationContainer.querySelector(':last-child');

  if (activeShape !== null) {
    activeShape.style.height = event.target.value + "px";
  }
});