仅使用手柄拖动整个父项 div

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 中添加了 class 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

Drag the entire parent div with just the handle

html

javascript

draggable