css - 制作一个 div，包含一个可拖动的 img

Question

我正在尝试使 div 可拖动。 div 包含一个 img 和一些用作图像标签的文本。问题是，当我通过单击 img 开始拖动时，img 被拖动，而不是父级 div。我该如何解决？

<div className="container-selected" id={id} draggable="true" onDragStart={this.dragStart} onDragEnd={this.drop} onClick={this.click}>
  <img src={imgSrc} />
  <span className="item-id">Some text</span>
</div>

这是 CSS:

.container-selected {
  padding: 10px;
  position: relative;
  z-index: 0;

  img {
    width: 3em;
    z-index: -1;
  }

  .item-id {
    position: absolute;
    left: 0;
    top:  53px;
    width: 100%;
    text-align: center;
  }
}

Answer 1

多年以后，我遇到了同样的问题，终于弄明白了。

默认情况下图像是可拖动的，因此当您在 div 中拖动图像时，图像会被拖动。您所要做的就是通过以下方式使图像不可拖动:

<img draggable="false" src={status} />

现在，当您拖动 div 时，div 及其包含的图像会被一起拖动。