制作一个 div，包含一个可拖动的 img答案

【问题标题】：Make a div, containing an img draggable制作一个 div，包含一个可拖动的 img
【发布时间】：2015-12-29 16:32:15
【问题描述】：

我正在尝试使 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={status} />
    <span className="beacon-id">Some text</span>
</div>

这是 CSS：

.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;
  }
}

【问题讨论】：

标签： css html drag-and-drop draggable

【解决方案1】：

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

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

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

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

【讨论】：

谢谢，我遇到了同样的问题，然后疯了 :-) 这绝对是一个很好的答案。

【解决方案2】：

您可以像这样使用 HTML5 的拖放功能：https://jsfiddle.net/bv5fLrth/23/

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

<div id="drag1" draggable="true" ondragstart="drag(event)">

<img id="drag1" src="http://lorempixel.com/400/200/" />
</div>
<script>
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }

  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }

</script>

【讨论】：

好的，这基本上就是我正在做的，但是你为 div 和 img 分配了相同的 id。这几乎可以完成这项工作。唯一的问题是，您拖动的对象看起来会有所不同，具体取决于您是否拖动图像或标签，但这确实很小。谢谢亚当！
@DmitryShvedov 我相信有更好的方法可以解决这个问题，希望其他人也能用更好的主意回答这个问题。