Question

我有两个单元格的简单表格。我将w3学校代码（用于拖放）更改为一个图像，当拖动第二个图像时，取第二个图像位置，第二个图像消失。但问题出现在细胞中没有图像，然后细胞消失了。如何检查单元格中是否有图像？

＆＃13;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var el = ev.target.parentNode;
    ev.target.appendChild(document.getElementById(data));
    el.appendChild(document.getElementById(data).cloneNode(true));
    var x = el.classList.contains('dropzone');
    if (!x) {
    ev.target.remove();
  }
}

＆＃13;

th, td{
  border: solid black;
  width: 100px;
  height: 100px;
  padding: 0px;
}
table{
 width:  300px;
  }
img{
  width: 100px;
}

＆＃13;

<table>
  <tr>
   <td ondrop="drop(event)" ondragover="allowDrop(event)"><img ondragstart="drag(event)" draggable="true" id="a8" src="http://images5.fanpop.com/image/photos/27700000/desert-windows-7-vista-and-xp-picks-27752343-500-375.jpg"></td>
    <td ondrop="drop(event)" ondragover="allowDrop(event)"><img ondragstart="drag(event)" draggable="true" id="b8" src="http://images5.fanpop.com/image/photos/27700000/jellyfish-windows-7-vista-and-xp-picks-27753183-500-375.jpg"></td>
  </tr>
</table>

＆＃13;

Answer 1

你可以遍历 td 元素并在你的javascript代码中添加 ondrop 事件，这样你就可以知道哪个元素触发了事件。

然后检查此元素是否内有子项。
如果不是=＆gt;不执行操作（内部没有图像元素），else =＆gt;执行动作（里面有图像元素）。

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

var td=document.getElementsByTagName("td");
for(var i=0; i < td.length;i++){   //bind ondrop event to all td, so it will be easier to get the element which fired the event
  td[i].ondrop=function(ev){ 
     ev.preventDefault();
     if (this.hasChildNodes()) {  //check if got children nodes (if got img inside)
    var data = ev.dataTransfer.getData("text");
    var el = ev.target.parentNode;
    ev.target.appendChild(document.getElementById(data));
    el.appendChild(document.getElementById(data).cloneNode(true));
    var x = el.classList.contains('dropzone');
    if (!x) {
    ev.target.remove();
  }
  }
    
  
  }
}

th, td{
  border: solid black;
  width: 100px;
  height: 100px;
  padding: 0px;
}
table{
 width:  300px;
  }
img{
  width: 100px;
}

<table>
  <tr>
   <td ondragover="allowDrop(event)"><img ondragstart="drag(event)" draggable="true" id="a8" src="http://images5.fanpop.com/image/photos/27700000/desert-windows-7-vista-and-xp-picks-27752343-500-375.jpg"></td>
    <td ondragover="allowDrop(event)"><img ondragstart="drag(event)" draggable="true" id="b8" src="http://images5.fanpop.com/image/photos/27700000/jellyfish-windows-7-vista-and-xp-picks-27753183-500-375.jpg"></td>
  </tr>
</table>

有关如何检查元素是否有子女的更多详细信息，请查看答案here

如何检查是否填充了单元格？JS

1 个答案: