Make a div, containing an img draggable

Question

I'm trying to make a div draggable. The div contains an img and some text that serves as a label for the image. The problem is that when I start the drag by clicking on the img, the img gets dragged, and not the parent div. How do I fix that?

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

Here's the 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

This is many years later, but I ran into the same problem, and finally figured it out.

An image is draggable by default, so when you drag an image in a div, the image gets dragged. All you have to do is the make the image non-draggable by:

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

Now when you drag the div, the div and its contained image are dragged together.