title: Make a div, containing an img draggable
body: <p>I'm trying to make a <code>div</code> draggable. The <code>div</code> contains an <code>img</code> and some text that serves as a label for the image. The problem is that when I start the drag by clicking on the <code>img</code>, the <code>img</code> gets dragged, and not the parent <code>div</code>. How do I fix that?</p>
  <pre><code>&lt;div className=&quot;container-selected&quot; id={id}
       draggable=&quot;true&quot; onDragStart={this.dragStart} onDragEnd={this.drop} onClick={this.click}&gt;
      &lt;img src={status} /&gt;
      &lt;span className=&quot;beacon-id&quot;&gt;Some text&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here's the CSS:</p>
  <pre><code>.container-selected {
    padding: 10px;
    position: relative;
    z-index: 0;
  
    img {
      width: 3em;
      z-index: -1;
    }
  
    .beacon-id {
      position: absolute;
      left: 0;
      top:  53px;
      width: 100%;
      text-align: center;
    }
  }
  </code></pre>