JavaScript - Перетаскивание

Question

В настоящее время я делаю проект перетаскивания javascript tic tac tac, и у меня возникают проблемы, которые определяют, кто выиграл игру. Если кто-то может подтолкнуть меня в правильном направлении, это будет здорово! (Код ниже)

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

(первый раз drag1 = идентификатор изображения дракона и drag2 - это идентификатор img для крысы)

if(sq1 == drag1 && sq2 == drag1 && sq3 == drag1){ 
    alert("Dragon Wins!"); 
} 
else if (sq4 == drag1 && sq5 == drag1 && sq6 == drag1){ 
    alert("Dragon Wins!"); 
} 

и т.д ....

так как бы я начала так, что Squar e определяет, какое изображение в нем?

Заранее спасибо.

Answer 1

На самом деле существует несколько способов достижения этого. Непосредственная один будет смотреть на атрибут ГКЗ изображения тега вы передаете:

function drop(ev) { 
    var data = ev.dataTransfer.getData("Text"); 
    var yourImageTag = document.getElementById(data); 

    if (yourImageTag.src.match(/dragon/)) { 
     //handle case dragon here 
    } 
    else { 
     //handle case for rat here 
    } 

    //your code for adding the image to the table row 

} 

В то время как это должно работать есть некоторые лучшие решения, которые являются немного более надежным, на мой взгляд.

Вы можете добавить атрибут данных в свой тег изображения и использовать jQuery для его получения, когда вам нужно будет решить.

<img data-type="dragon" src="..."> //this would go in your html markup 
var imageType = $(yourImageTag).data('type'); //this would go in your drop function 

Другим способом было бы установить тип с объектом dataTransfer при его перетаскивании.