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

Question

我有一个包含 2 个表格的 HTML 页面，每个表格有 6 行，每行包含 6(90 像素 x 90 像素)图像。所有图像都是 .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 控制台中没有错误。我正在使用类似的功能函数 handleDrop(事件){
事件.preventDefault();
var piece = event.dataTransfer.getData("文本", event.target);
代码中还有一行用于 appendChild。我还没有发布实际代码的原因是因为我已经从我的手机上发布了这个。

我设置我的事件处理程序来测试其中一张图片，方法是

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

我得到的最接近的是我正在测试的棋子图像会拖动，当我放下时，它会从原始位置消失，并且目标表上的随机位置(正方形)会变黑，不幸的是那不是我要去

谁能帮帮我？

干杯

Answer 1

我能够通过在 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;
}