Question

我打算拖动整个父div，仅将手柄连接到其左侧。参见下面的代码片段，30x30图像现在是我的拖动手柄：

var DRAG_CLASS = "beingdragged";

div.ondragstart = function() {
  this.classList.add(DRAG_CLASS);
};

div.ondragend = function() {
  this.classList.remove(DRAG_CLASS);
};

img {
  cursor: move;
  float: left;
}

div {
  border: 1px solid red;
  background: lightblue;
  width: 100%;
  transform: 0.5s ease;
}

div.beingdragged {
  width: 95%;
}

<!DOCTYPE html>
<html>
<body>
  <div id="div" draggable="true"><img src="https://placehold.it/30x30">
    <p>this is some text</p>
  </div>
</body>

</html>

我希望整个div在用户四处移动光标时与光标一起移动，就像在拖动操作中所期望的那样。但是，从输出中可以看到，即使我将draggable="true"设置为整个父div，也仅拖动了图像。即使光标四处移动，整个父div仍保持原样。

我在div中添加了一个类DRAG_CLASS，因此，您可以看到dragstart和dragend事件正在正确触发。

那是什么问题？

Answer 1

请确保div是可拖动的，正如您在将其拖动到图片以外的其他位置时所看到的那样。

但是，默认情况下，图像也可以独立拖动。不过，使用draggable="false"或相应的CSS规则很容易禁用。

var DRAG_CLASS = "beingdragged";

div.ondragstart = function() {
  this.classList.add(DRAG_CLASS);
};

div.ondragend = function() {
  this.classList.remove(DRAG_CLASS);
};

img {
  cursor: move;
  float: left;
}

div {
  border: 1px solid red;
  background: lightblue;
  width: 100%;
  transform: 0.5s ease;
}

div.beingdragged {
  width: 95%;
}

<!DOCTYPE html>
<html>
<body>
  <div id="div" draggable="true"><img draggable="false" src="https://placehold.it/30x30">
    <p>this is some text</p>
  </div>
</body>

</html>

仅使用手柄拖动整个父div

1 个答案: