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

Question

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

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 tables...

    .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。我还没有发布实际代码的原因是因为我已经从我的 phone 发布了这个代码。

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

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

我得到的最接近的是我正在测试的图片会拖动，当我放下时，它会从原来的位置消失，并且目的地 table 上的随机位置（正方形）会转动黑色，不幸的是那不是我想要的

谁能帮帮我？

干杯

Answer 1

我可以通过在放置事件发生时添加 class 然后设置 td 元素的属性和新的 .matched class 来实现这一点，以允许使用 z- 进行图像叠加索引....像这样...

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 和新的 class:

.gametray td {
    position: relative;
}

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

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

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

html

javascript

css

drag