拖放不工作？

Question

我試圖讓HTML5 DnD工作。
我可以拖動但不能放下。爲什麼？
我錯過了什麼？

小提琴：
https://jsfiddle.net/un4e4rqn/

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> 

JS

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; 
} 

Answer 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)); 

}