JavaScript - 拖放

Question

我目前正在做一个tic tac toe javascript拖放项目，我遇到了麻烦，让它决定谁赢了比赛。如果有人能够把我推向正确的方向，那就太棒了！（代码如下）

我想要做的是当我将其中一个x（在我的情况下是一条龙）和o（一只老鼠）放入我创建的一个方格中时我希望它检测到它在那里所以我可以创建这样的东西

（首先关闭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!");
}

等...

那么我将如何开始使广场检测出其中的图像？

提前致谢。

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