使用普通的JavaScript拖放网格中的交叉符号？ [英] Drag and Drop the cross sign within box in the grid using plain javascript?

问题描述

我在HTML中制作了一个网格框，如果有人点击一个框，它会在其上绘制x标志，如果我点击已经具有 x x 。

结帐 此DEMO 。
$ b

• 现在我想将这个十字标志（x）拖到我盒子中的任何其他网格中，但是如果我试图拖动将交叉符号交给已经拥有它的盒子，然后该动作应该被取消。

我怎样才能使用HTML和纯Javascript只有？

解决方案

使用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。

设置一个 ondragstart 处理程序，该处理程序将索引存储到拖放操作 dataTransfer 对象。此代码旨在用于较新的浏览器（使用MIME类型）和旧版IE（使用text）。

  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）; 
尝试{
 ev.dataTransfer.setData（text / plain，cell_index）; 
} catch（例外）{
 ev.dataTransfer.setData（text，cell_index）; 
 
 
 $ / code $ / pre 
 
 5）删除了清除X因为这与您现在想要的行为不一致： 
 
 
 函数allowDrop（ev，obj）{
 ev.preventDefault（）; 
 //obj.innerHTML =''; 
 
 code 
 
 
 
 6）将代码添加到 drop（） code> that：
 
 a）检查这个单元格中是否已经有一个X（如果是的话取消掉）
 
  b）在这个单元格中放入一个X  
 
 从 dataTransfer 对象并使用它来清除启动拖动的单元格 
 
 
  function drop（ev，obj）{
 ev .preventDefault（）; 
 
 if（obj.innerHTML！==''）{// not empty 
 return false; 
} else {
 createX（obj）; 
} 
 
 var data; 
尝试{
 data = ev.dataTransfer.getData（text / plain）; 
} catch（例外）{
 data = ev.dataTransfer.getData（text）; 
} 
 var cell_id =cell_+ data; 
 document.getElementById（cell_id）.innerHTML =''; 
} 
  
 
I have made a box of grid in an HTML in which if anyone clicks on a box it will draw x sign on it and if I click on the box which already has x then it will remove that x.


Checkout this DEMO.

Problem Statement:-


Now I want to drag this cross sign (x) to any other grid in my box but if I am trying to drag the cross sign to a box which already has it, then the action should be cancelled.


How can I do this using HTML and plain Javascript only?
解决方案
Working JSFiddle: http://jsfiddle.net/wz4hs9qa/2/

These are the changes to your code:

1) Gave each cell an id corresponding to its index:
cell.id = "cell_" + i;
2) Fixed a typo:
on_drop.value = "drop(event, this)";
3) Moved the ondragover attribute to the cell, not the X inside it.  This is important because dropping must be enabled on empty cells.
var on_dragover = document.createAttribute('ondragover');
on_dragover.value = "allowDrop(event, this)";
cell.setAttributeNode(on_dragover);
4)

a) Gave each X an id similar to that of its containing cell, so that the drop event handler knows which cell to clear when moving an X.

b) Set an ondragstart handler that stores the index into the drag-and-drop dataTransfer object.  This code is designed to work on both newer browsers (using a MIME type) and older versions of IE (using "text").
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) Got rid of the line that cleared an X on every drop, since this is inconsistent with the behavior you want now:
function allowDrop(ev, obj) {
    ev.preventDefault();
    //obj.innerHTML = '';
}
6) Added code to drop() that:

a) checks whether there is already an X in this cell (cancelling drop if so)

b) puts an X in this cell

c) reads the cell index from the dataTransfer object and uses it to clear the cell where the drag was initiated
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拖放网格中的交叉符号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！