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

Question

I have a HTML page that contains 2 tables, each table has 6 rows and each row holds 6 (90px by 90px) image. All images are .PNG and ideally I want to be able to drag one image, and have it drop into the other table and overlay the other image.

The HTML looks like this:

<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

and the CSS for the 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;
}

In JavaScript I have pulled all the images in as follows:

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;
                }

I have played around with creating functions to handle the: allowDrop (preventDefault()) Handle drag event and Handle drop event.

The code I am using isn't working. In the web console there are no errors. I was using a function something like function handleDrop(event) { event.preventDefault(); var piece = event.dataTransfer.getData("text", event.target); There was also a line in the code to appendChild. The reason I have not posted the actual code yet is because I have posted this from my phone.

I set up my event handlers to test one of the images by doing something like

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

The closest I got was that the piece image I was testing on would drag and when I drop, it would disappear from the original location, and a random location (square) on the destination table would turn black, unfortunately that's not what I'm going for

Can anyone help me?

Cheers

Please edit your question to describe how your code isn't working. If you're getting an error message, add the error message. If you're getting incorrect behavior, please describe the behavior. — Oblivious Sage

coopwatts coopwatts · Accepted Answer · 2015-03-17T01:12:35

I was able to accomplish this by adding a class when the drop event occurs and then set the properties of the td elements and the new .matched class to allow image overlay using z-index....like this...

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
    }

}

And the CSS for the td elements and the new class:

.gametray td {
    position: relative;
}

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

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

1 Answers