Javascript 在拖放中交换内容

我使用拖放功能，这样学生们就可以将一张杂乱的图像片段放到网格上，重新组合原始图像

两个网格（混乱和重建）都允许删除，并且一切正常

但是，在某些情况下，学生可能会将一个对象放在另一个对象上，我希望代码将原始对象移动到所选项目最近腾空的对象上

我尝试过不同的概念，可能走错了方向，但使用了以下方法进行测试：

function drop(ev) {
    ev.preventDefault();
    var tgt = ev.dataTransfer.getData("text");
    var currentContents = document.getElementById(tgt);
    ev.target.appendChild(document.getElementById(tgt));
    var newContents = document.getElementById(tgt);
    alert("Current = " + currentContents + " - New = " + newContents);

}

这里的想法是，我可以简单地存储元素细节本身，或者将innerHTML存储到一个变量中，允许像平常一样进行删除，然后将捕获的HTML分配给前一个div

但是，上面的代码仅报告[object HTMLimageElement]（即使在本例中，收件人不包含任何图像数据）

我尝试了innerHTML，但根本没有收到任何结果

---

我甚至还没有开始研究如何识别拖动图像来自的原始div。

好的，我花了一些时间研究了所有我能理解的值

我的结局是：

function drop(ev) {
    ev.preventDefault();
    var prntId = ev.target.parentNode.id;
    var tgt = ev.dataTransfer.getData("text");
    var tgtId = ev.target.id;

    if (prntId === "targetDiv") {
        ev.target.appendChild(document.getElementById(tgt));
        imgPos[searchList(tgt)] = tgtId;
    } else {
        var thought = document.getElementById(prntId);
        var orgHTML = thought.innerHTML;
        var listPos = imgPos[searchList(tgt)];
        thought.removeChild(thought.firstChild);
        thought.appendChild(document.getElementById(tgt));
        document.getElementById(listPos).innerHTML = orgHTML;
        imgPos[searchList(tgtId)] = listPos;
        imgPos[searchList(tgt)] = prntId;
    }
}

function searchList(searchItem) {for (i = 0; i < 24; i++) {if (imgId[i] === searchItem) {return i;}}}

功能下降（ev）{
ev.preventDefault（）；
var prntId=ev.target.parentNode.id；
var tgt=ev.dataTransfer.getData（“文本”）；
var tgtId=ev.target.id；
如果（prntId==“targetDiv”）{
ev.target.appendChild（document.getElementById（tgt））；
imgPos[searchList（tgt）]=tgtId；
}否则{
var think=document.getElementById（prntId）；
var orgHTML=think.innerHTML；
var listPos=imgPos[searchList（tgt）]；
思想。removeChild（思想。第一个孩子）；
appendChild（document.getElementById（tgt））；
document.getElementById（listPos）.innerHTML=orgHTML；
imgPos[searchList（tgtId）]=listPos；
imgPos[搜索列表（tgt）]=prntId；
}
}
函数searchList（searchItem）{for（i=0；i<24；i++）{if（imgId[i]==searchItem）{return i；}}}

不是我写过的最漂亮的代码，而是功能性的

我发现，当DIV为空时，返回的ID是DIV的ID，而当添加一个子对象时，返回的ID是图像ID。我可以获得HTML img标记的全部内容，因此我拥有了所需的一切

基本上，如果DIV没有子元素，则事件target.parentNode.id返回“targetDiv”。一、 因此，将一个子项附加到DIV（dataTransfer中存储的数据返回的ID），并使用其新位置更新图像列表

但是，任何其他值都是父DIV的ID。因此，将目标DIV中的当前HTML复制到变量（orgHTML）中，找到tgt图像从中拖动的原始位置，将orgHTML数据放在这个现在已空出的DIV中

然后，一旦我从DIV中删除了任何子对象，我将继续执行该过程的drop部分，更新相关列表中图像的新位置

这是明摆着的（我累了，而且已经很晚了），但总有一天它可能会对某人有所帮助