感谢您查看我的问题。几天来,我一直在努力解决这个问题,阅读了所有可能的 HTML5 拖放引用资料,并尽可能多地阅读了 stackflow 上的内容,但我就是想不通。
所以我的问题:
来源:https://jsfiddle.net/dzsk7311/3/
<div id="divLeft">
<div id="divLeft1">
<img src="http://icons.iconarchive.com/icons/designcontest/casino/96/Banana-icon.png" draggable="true" ondragstart="drag(event)" id="drag1" width="50" height="50">
</div>
<div id="divLeft2">
<img src="http://icons.iconarchive.com/icons/rokey/smooth/128/apple-icon.png" draggable="true" ondragstart="drag(event)" id="drag2" width="50" height="50">
</div>
</div>
<div id="divRight">
<div id="divRight1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divRight2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divRight3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divRight4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
-
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");
var nodeCopy = document.getElementById(data).cloneNode(true);
ev.target.appendChild(nodeCopy);
ev.stopPropagation();
return false;
}
我想完成的事情:
- 将图像从
divLeft
拖到divRight
(实际上会被拖到:divRight1, divRight2, divRight3, divRight4
)通过克隆来制作确保原始图像保留在原处以供再次使用。 - 将图像拖放到右侧四个 div 之一后,让它成为一个独立的图像,可以在四个 div 之间独立拖动,而无需克隆和与另一个图像交换位置。因此,如果我在
rightDiv1
和rightDiv3
中有一个图像,然后将rightDiv3
中的图像拖动到rightDiv1
,我希望他们只是交换位置。 - 如果将图像从
divLeft
拖放到“divRight”,请用新图像替换该位置的现有图像。
问题是什么:
- 目前我的克隆工作没有任何问题,但如果我将新图像从左侧拖到右侧,它不会替换右侧的图像。
- 我也无法将右侧的图像相互拖动。
我希望这一切都是有道理的,我非常感谢所有帮助,因为我一直在绞尽脑汁。我知道我提供的代码是有限的,但我向你保证,我已经尝试了尽可能多的事情,只是想回到一个好的起点以获得支持。
再次感谢大家。
最佳答案
我已经稍微修改了你的函数来更新节点id
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var isLeft = 'drag1' == data || "drag2" == data;
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "img" + ev.target.id;
if (!isLeft) {
sourceNode = document.getElementById(data);
sourceNode.parentNode.removeChild(sourceNode);
}
ev.target.appendChild(nodeCopy);
ev.stopPropagation();
return false;
}
参见 DEMO
关于jquery - 克隆和替换的 HTML5 拖放问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28507642/