Question

我想帮助改进以下内容。如果正确，如何以红色或绿色显示错误的答案。这是填补空白的差距。为我的语言学生放下练习。

以下是我正在使用的简单代码：

<!DOCTYPE HTML>

<html>
  <head>
    <style>
      .draggable {
    width: 120px;
    padding: 1px;
    border: 1px solid gray;
    margin: 0px;
    text-align:center;
}

  #div1,#div2 
   {display:inline-block;min-width:150px;min-height:10px;
   border-style:solid;border-width:0px;border-bottom-width:2px;}
  </style>
  <script>
  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");
    ev.target.parentNode.replaceChild(document.getElementById(data), ev.target);
    document.getElementById(data).className = "";
  }
</script>
</head>
<body>
<span class="draggable" id="drag1" draggable="true" ondragstart="drag(event)">
HEART TO HEART</span>
<span class="draggable" id="drag2" draggable="true" ondragstart="drag(event)">
EYE TO EYE</span>
<br />

<ol>
<li>Our relationship was going badly wrong, but after we sat down and had a 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> talk we
decided to try again. We're a lot happier now.
</l7>

<li>I wish my wife and my sister could agree about some things. The problem is that
 they just can't see <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div> and argue about everything.
</li>
</ol>
</body>
</html>

Answer 1

如果您将JSFiddle中的加载选项设置为 ＆＃34;没有换行＆lt; head＆gt;＆＃34; ，则拖放操作将起作用。请使用控制台诊断您的问题并在帖子中包含任何错误。

您似乎在http://www.w3schools.com/html/html5_draganddrop.asp上关注本教程，因为它们未被W3认可/附属，因此不是学习Web开发的地方。

以下 DEMO 应该可以正常运行。我在Chrome上测试了这个。

我对drag()函数进行了简单的更改：

function drag(ev) {
    ev.target.innerHTML += ' '; // Add space so that there is no keming...
    ev.dataTransfer.setData("Text", ev.target.id);
}

拖动;需要帮助

1 个答案: