Перетащите изображение .PNG на верхнюю часть другого в JavaScript

Question

У меня есть страница HTML, которая содержит 2 таблицы, каждая таблица имеет 6 строк, и каждая строка содержит 6 (90 пикселей по 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()) Событие переноса рукоятки и событие Drople Handle.

Код, который я использую, не работает. В веб-консоли ошибок нет. Я использовал функцию что-то вроде function handleDrop(event) { event.preventDefault(); var piece = event.dataTransfer.getData("text", event.target); В appendChild также была строка в коде. Причина, по которой я еще не опубликовал фактический код, заключается в том, что я опубликовал это с моего телефона.

настроить свои обработчики событий, чтобы проверить одно из изображений, делая что-то вроде

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

Самое близкое, что я получил, было то, что изображение части, которое я тестировал, будет таскать, и когда я уйду, оно исчезнет из исходного местоположения, а случайное местоположение (квадрат) в таблице назначения станет черным, к сожалению, это не так что я собираюсь делать

Может ли кто-нибудь мне помочь?

Приветствие

Answer 1

Я был в состоянии сделать это, добавив класс, когда происходит событие падения, а затем установить свойство элементов TD и нового .matched класса, чтобы позволить наложение изображения с помощью Z-индекс ... .like это ...

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 
    } 

}

и CSS для элементов TD и нового класса:

.gametray td { 
    position: relative; 
} 

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