javascript - 将.PNG图像拖放到JavaScript中的另一个图像之上

我有一个包含2个表的HTML页面，每个表有6行，每行包含6（90px x 90px）图像。所有图像均为.PNG，理想情况下，我希望能够拖动一个图像，然后将其放到另一张表格中并覆盖另一张图像。

HTML看起来像这样：

<div id="play-area">
        <table class="piecetray">
            <tr>
                <td><img src="media/hex1.png"></td>
                <td><img src="media/hrt1.png"></td>
                <td><img src="media/pent1.png"></td>
                <td><img src="media/up1.png"></td>
                <td><img src="media/tri1.png"></td>
                <td><img src="media/star1.png"></td>
            </tr>
            <tr>
                <td><img src="media/star1.png"></td>
                <td><img src="media/tri1.png"></td>
                <td><img src="media/up1.png"></td>
                <td><img src="media/pent1.png"></td>
                <td><img src="media/hrt1.png"></td>
                <td><img src="media/hex1.png"></td>
            </tr>
            <tr>
                <td><img src="media/hex1.png"></td>
                <td><img src="media/hrt1.png"></td>
                <td><img src="media/pent1.png"></td>
                <td><img src="media/up1.png"></td>
                <td><img src="media/tri1.png"></td>
                <td><img src="media/star1.png"></t

以及表格的CSS ...

    .gametray {
    background-color: black;
    border: 3px solid black;
    display: inline-block;
    margin-left: 20px;
}

.gametray td {
    background-color: #003399;
    border: 1px solid black;
}

.gametray img {
    display: block;
    height: 90px;
    width: 90px;
}

.piecetray {
    background-color: #0052CC;
    border: 3px solid black;
    display: inline-block;
    margin-right: 20px;
}

.piecetray td {
    border: 1px solid transparent;
}

.piecetray img {
    display: block;
    height: 90px;
    width: 90px;
}

在JavaScript中，我将所有图像提取如下：

Perfection.view = {
timer       :   currentTime = document.getElementById("timer"),
**dragPieces    :   document.querySelectorAll(".piecetray td img"),
**targetPieces  :   document.querySelectorAll(".gametray td img"),
updateTime  :   function(count) {
                    this.timer.innerHTML = count;
                }

我玩过创建函数来处理：
allowDrop（preventDefault（））
处理拖动事件和处理放置事件。

我正在使用的代码无法正常工作。在Web控制台中没有错误。我正在使用类似的功能
function handleDrop(event) {event.preventDefault();var piece = event.dataTransfer.getData("text", event.target);
在代码中还有一行到appendChild。我尚未发布实际代码的原因是因为我已从手机中发布了此代码。

我设置了事件处理程序，通过执行以下操作来测试其中一张图片

Perfection.view.dragPieces [1] .ondrop = handleDrop;

我得到的最接近的图像是，我正在测试的图像会拖动，当我放下图像时，它会从原始位置消失，并且目标表上的随机位置（正方形）会变成黑色，不幸的是，这不是我所要的。去

谁能帮我？

干杯

最佳答案

我能够通过在发生drop事件时添加一个类，然后设置td元素的属性和新的.matched类来允许使用z-index进行图像叠加来完成此操作。

function handleDrop(event) {
event.preventDefault();
var piece = document.querySelector(".selected");
var target = event.target;
var targetParent = event.target.parentElement; //this gets the td element
    if (getName(piece) === getName(target)) {
        targetParent.appendChild(piece);
        piece.classList.remove("selected");
        piece.classList.add("matched"); //this class gets added
    }

}

以及td元素和新类的CSS：

.gametray td {
    position: relative;
}

table td .matched {
   position: absolute;
   z-index: 2;
   top: 0px;
   left: 0px;
}