JavaScript-拖放

我目前正在做一个tic-tac-toe javascript拖放项目，我很难决定谁赢得了游戏。如果有人能把我推向正确的方向，那就太好了！（代码如下）

我想做的是，当我把一个x（在我的例子中是一条龙）和一个o（一只老鼠）放到我已经创建的一个方块中，我想让它检测到它在那里，这样我就可以创建类似这样的东西

（第一个drag1=龙图像的id，drag2是rat的img id）

等等

那么，我该如何开始，让正方形检测其中的图像呢

---

提前感谢。

实际上有几种方法可以实现这一点。一个简单的方法是查看正在传递的图像标记的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

//这将放在html标记中
var imageType=$（yourImageTag）.data（'type'）//这将进入你的下降功能

另一种方法是在开始拖动dataTransfer对象时使用该对象设置类型

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