制作一个包含img draggable的div

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了制作一个包含img draggable的div相关的知识,希望对你有一定的参考价值。

我正在尝试使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>

这是风格:

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

您可以像这样使用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 draggable="false" src={status} />

现在当你拖动div时,div和它包含的图像被拖到一起。

以上是关于制作一个包含img draggable的div的主要内容,如果未能解决你的问题,请参考以下文章

为啥使用 draggable="true" 拖动时不显示 div 的内容?

限制各个容器 div 中多个 div 的拖动 - jquery draggable

JqueryUI Draggable - 仅垂直自动调整父容器的大小

有没有办法制作包含其他标签的自定义 HTML 标签?

对于未嵌套的“可拖动”div 标签:JQuery/JavaScript div 标签“包含”方法/算法?

div里包含img底部必定多出空白的解决办法