Question

我有一个问题，我有两个div，一个有图像，另一个没有：

<div id="div1" ondragover="allowDrop(event)" ondrop="drop(event)">
<img id="1" ondragstart="drag(event)" draggable="true"  src="image1.jpg" />
<img id="2" ondragstart="drag(event)" draggable="true"  src="image2.jpg" />
<img id="3" ondragstart="drag(event)" draggable="true"  src="image3.jpg" />
<img id="4" ondragstart="drag(event)" draggable="true"  src="image4.jpg" />       

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

这是Javascript：

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

我想要两个div之间的通信图像。

代码＆＃34;工作＆＃34;但我有一个很大的问题是：当我在其他图像中拖动一个图像时，第一个图像选择消失，drop（）函数？我怎么能避免这个？

更新：

我创建了这个功能

function dropImg(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
    var clonado= document.getElementById(data);
  var padre =ev.target.parentNode['id'];

    ev.target.parentNode.insertBefore(clonado,padre.firstChild);


}

并包含在img标签

上

<img id="2" ondragstart="drag(event)" ondrop="dropImg(event)" draggable="true"  src="image2.jpg" />

结果：克隆图像在另一个iage中

<img id="1" ondragstart="drag(event)" ondrop="dropImg(event)" src="1.jpg">
<img id="2" ondragstart="drag(event)" ondrop="dropImg(event)" scr=2.jpg />
</img>

拖放图像中的图像，而不是破坏第一个

0 个答案: