制作一个包含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 - 仅垂直自动调整父容器的大小