我正在努力让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;
}
答案 0 :(得分:2)
您dataTransfer
方法中的drop
拼写错误。 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));
}