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

【问题标题】：Drag and Drop a .PNG image overtop another one in JavaScript在 JavaScript 中将 .PNG 图像拖放到另一个图像之上
【发布时间】：2015-03-13 16:21:34
【问题描述】：

我有一个包含 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 控制台中没有错误。我正在使用类似的功能 function handleDrop(event) { event.preventDefault(); var piece = event.dataTransfer.getData("text", event.target); 代码中还有一行用于 appendChild。我还没有发布实际代码的原因是因为我是通过手机发布的。

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

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

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

谁能帮帮我？

干杯

【问题讨论】：

请编辑您的问题以描述如何您的代码无法正常工作。如果您收到错误消息，请添加错误消息。如果您的行为不正确，请描述该行为。

标签： javascript html css drag

【解决方案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;
}

【讨论】：