使用普通javascript在网格中拖放方框内的十字符号？

我在HTML中制作了一个网格框，如果有人点击框，它会在框上画x符号，如果我点击已经有

x

的框，它会删除

x

结帐

问题陈述：-

• 现在，我想将此十字符号（x）拖动到方框中的任何其他网格，但如果我试图将十字符号拖动到已有十字符号的方框中，则应取消该操作

如何仅使用HTML和纯Javascript实现这一点？

使用JSFIDLE：

以下是对代码的更改：

1） 为每个单元格提供与其索引对应的

id

：

cell.id = "cell_" + i;

2） 修正了一个打字错误：

on_drop.value = "drop(event, this)";

3） 将

ondragover

属性移动到单元格，而不是其中的X。这很重要，因为必须在空单元格上启用删除

var on_dragover = document.createAttribute('ondragover');
on_dragover.value = "allowDrop(event, this)";
cell.setAttributeNode(on_dragover);

(四)

a） 为每个X指定一个与其包含单元格的id类似的

id

，以便

drop

事件处理程序知道在移动X时要清除哪个单元格

b） 设置一个

ondragstart

处理程序，将索引存储到拖放

dataTransfer

对象中。此代码设计用于在较新的浏览器（使用MIME类型）和较旧版本的IE（使用“文本”）上工作

6） 在

drop（）

中添加了以下代码：

a） 检查此单元格中是否已存在X（如果存在，则取消删除）

b） 在这个单元格中放一个X

c） 从

数据传输

对象读取单元格索引，并使用它清除开始拖动的单元格

function drop(ev, obj) {
    ev.preventDefault();

    if (obj.innerHTML !== '') { // not empty
        return false;
    } else {
        createX(obj);
    }

    var data;
    try {
        data = ev.dataTransfer.getData("text/plain");
    } catch (exception) {
        data = ev.dataTransfer.getData("text");
    }
    var cell_id = "cell_" + data;
    document.getElementById(cell_id).innerHTML = '';
}

---

无法访问JS-bin。请改用此选项。如果有人希望JS与HTML分开：@myfunkyside谢谢您的帮助。我将在我的问题中使用JSFIDLE。非常感谢。谢谢你的帮助。它很好用但我看到了一个小问题。到现在为止，默认框大小是3x3，对吗？因此，交叉标志能够正确地安装在每个箱子中。如果我尝试将方框大小增加到8x8，则十字符号无法正确地放入一个方框中，它与另一个方框重叠。我们如何处理这种情况？之所以会出现这种情况，是因为X被包装在

中，浏览器以大字体显示。使用CSS更改字体大小（最好在执行此操作之前将

替换为

或

）。我会使用一个“X”的图像（具有透明背景），并将其缩放到

createX（）

中单击的

gridCell

的大小。这样，“X”将始终与单元格成比例缩放。。。这在CSS中：

.x{宽度：100%；高度：100%；}

@myfunkyside cool。现在工作很好：）谢谢你的帮助。

function allowDrop(ev, obj) {
    ev.preventDefault();
    //obj.innerHTML = '';
}

function drop(ev, obj) {
    ev.preventDefault();

    if (obj.innerHTML !== '') { // not empty
        return false;
    } else {
        createX(obj);
    }

    var data;
    try {
        data = ev.dataTransfer.getData("text/plain");
    } catch (exception) {
        data = ev.dataTransfer.getData("text");
    }
    var cell_id = "cell_" + data;
    document.getElementById(cell_id).innerHTML = '';
}