Question

我在HTML中制作了一个网格框，如果有人点击某个框，它会在其上绘制x符号，如果我点击已经有os.path.join(scriptdir, 'spam.txt')的框，那么它将删除x 1}}。

结帐this DEMO。

问题陈述： -

现在我想将这个十字标记（x）拖到我框中的任何其他网格中，但是如果我试图将十字标记拖动到已经有它的框中，则应该取消该操作。

我怎样才能使用HTML和普通的Javascript进行此操作？

Answer 1

使用JSFiddle：http://jsfiddle.net/wz4hs9qa/2/

以下是对您的代码的更改：

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);

4）

a）给每个X一个id类似于其包含的单元格，以便drop事件处理程序知道在移动X时要清除哪个单元格。

b）设置一个ondragstart处理程序，用于将索引存储到拖放dataTransfer对象中。此代码适用于较新的浏览器（使用MIME类型）和旧版本的IE（使用＆＃34; text＆＃34;）。

function createX(obj){
    if (obj.innerHTML == ''){
        var id = obj.id.replace("cell", "X");
        obj.innerHTML = "<h1 id='" + id + "' style='text-align:center;' draggable='true' ondragstart='saveCell(event, this);'>X</h1>";
    } else {
        obj.innerHTML = "";
    }
}

function saveCell(ev, obj) {
    var cell_index = obj.id.substring(2);
    try {
        ev.dataTransfer.setData("text/plain", cell_index);
    } catch (exception) {
        ev.dataTransfer.setData("text", cell_index);
    }
}

5）摆脱在每一滴上清除X的线，因为这与你现在想要的行为不一致：

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

6）向drop()添加了以下代码：

a）检查此单元格中是否已有X（如果是，则取消掉落）

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

c）从dataTransfer对象中读取单元格索引并使用它来清除启动拖动的单元格

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 = '';
}

使用普通的javascript拖放网格框内的十字标志？

1 个答案: