删除不工作？答案

【问题标题】：Drop not working?删除不工作？
【发布时间】：2015-08-09 04:52:00
【问题描述】：

我正在尝试让 HTML5 DnD 正常工作。
我可以拖动但不能放下。为什么？
我错过了什么？

HTML

<div class="well" id="columns">
  <section id="drop_element" ondrop="drop(event)" ondragover="allowDrop(event)"></section>
</div>
<div class="col-md-2 well" id="lista_objekt">
  <section id="drag_element">
    <ul>
      <li class='elements' id='888' draggable='true' ondragstart='drag(event)'>222</li>
    </ul>
  </section>
</div>

function allowDrop(ev){
  ev.preventDefault();
}
function drag(ev){
  ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
  ev.preventDefault();
  var data = ev.dataTranfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
}

CSS

#drop_element {
  height: 200px;
  width: 200px;
  border: 3px solid activeborder;
}
.elements:hover {
  color: red;
}

【问题讨论】：

为什么让你的生活如此艰难？开始使用 jQuery。 =)

标签： javascript html drag-and-drop

【解决方案1】：

您的drop 方法中的dataTransfer 似乎拼写错误。 Here 是一个更新的 jsfiddle。

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.appendChild(document.getElementById(data));

}

【讨论】：