JavaScript - 拖放

Question

我目前正在做一個井字遊戲的JavaScript拖放項目，我有麻煩讓它決定誰贏了比賽。如果有人能把我推向正確的方向，那就太棒了（代碼如下）

我想要做的是當我放下其中一個x（在我的情況下是它的龍）和o的（老鼠）到我創建的其中一個正方形中，我希望它能夠檢測到它在那裏，所以我可以創建類似於這樣的東西

（first off drag1 =龍形象的id，drag2是大鼠的img id）

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

實際上有幾種方法來實現這一點。一個直接的人會看你傳遞圖像標記的src屬性：

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對象設置類型。