Question

我想知道是否有人可以就此拖放问题提供一些建议。我有4个球在启动时随机出现在Web应用程序中。每个都有一个随机数，只有一个包含正确的答案。当它落入掉落区时，识别出这个正确的球。我遇到的问题是，当拖动一个球时，我试图将它从源区域（这是一个表格）中完全移除，同时将其拖动到dropzone。然后，在设定的6毫秒时间后，球应重新出现在源区域。

HTML代码：源表：

<td><div id="bball1" draggable="true" ondragstart="return dragStart(event)" ondrag="drag(event)"></div></td>
<td><div id="bball2" draggable="true" ondragstart="return dragStart(event)" ondrag="drag(event)"></div></td>
<td><div  id="bball3" draggable="true" ondragstart="return dragStart(event)" ondrag="drag(event)" ></div></td>
<td><div id="bball4"  draggable="true" ondragstart="return dragStart(event)" ondrag="drag(event)" ></div></td>

dropzone：

<div id="drop_zone" ondrop="drop(event)" ondragover="dragStart(event)"></div>

Javascript：

function dragStart(ev) {                                           
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));

var node = document.getElementById(ev.target.getAttribute('id'));    
if (node.parentNode) {
  var parent = node.parentNode;
  parent.removeChild(node);
  setTimeout(function() {parent.appendChild(node); }, 600);
  }

 return true;
}

function dragOver(ev) {
ev.preventDefault();  
ev.dataTransfer.effectAllowed='move';     
}

function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
// math code that is triggered by the event here.
}

发生的事情是，当我在球源处拖动球时，球被移除并在完成设定超时后返回。问题是它完全一起删除。它不会拖到dropzone。当我删除该行

parent.removeChild(node);

然后拖动过程完美无缺，但球不会从源表中删除。

如果有人可以提供任何帮助，我将不胜感激。

Answer 1

在表格中拖放可能很棘手，

你不想移动牢房，

但是细胞的内容。

将拖动的项目附加到透明容器

可能会更顺畅

用于移动并在移动完成时将其附加到新父级

删除节点并重新出现＆＃39;它

无法在HTML5和Javascript中执行干净的拖放操作

1 个答案: