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

Drag and Drop a .PNG image overtop another one in JavaScript

本文关键字：图像 PNG 拖放 另一个 一个 JavaScript      更新时间：2023-09-26

我有一个包含 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); 代码中还有一行用于追加Child。我还没有发布实际代码的原因是因为我是从手机上发布的。

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

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

我

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

谁能帮我？

干杯

我能够通过在 drop 事件发生时添加一个类来实现这一点，然后设置 td 元素和新的 .match 类的属性以允许使用 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;
}
相关文章：