JavaScript - 拖放

Question

我目前正在做一个 tic tac toe javascript 拖放项目，但我在让它决定谁赢得了游戏时遇到了麻烦。如果有人可以将我推向正确的方向，那就太好了!(代码如下)

我想做的是，当我将一个 x(在我的例子中是一条龙)和 o(一只老鼠)放入我创建的一个方 block 中时，我希望它检测到它在那里，所以我可以创建这样的东西

(首先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!");
}

等等......

那么我该如何开始，以便方 block 检测其中的图像？

提前致谢。

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 对象时设置其类型。