我正在测试拖放元素。我打算稍后编辑它来做其他事情。现在我跟着一本名为Sams Teach Yourself HTML5的书。我已经遵循了代码到字母，但由于一些未知的原因，它拒绝允许拖放工作。我使用过最新的Internet Explorer Mozilla Firefox和Google Chrome。我试过大约4种不同的代码验证器无济于事。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Drage and Drop Example
</title>
<style type="text/css">
#target1, #target2, #target3
{
float: left; width: 250px; height: 250px;
padding: 10px; margin: 10px;
}
#draggable1, #draggable2, #draggable3
{
width: 75px; height: 70px; padding: 5px;
margin: 5px;
}
#target1{background-color: cyan;}
#target2{background-color: cyan;}
#target3{background-color: cyan;}
#draggable1{background-color: orange;}
#draggable2{background-color: orange;}
#draggable3{background-color: orange;}
</style>
<script type="text/javascript">
function start(e)
{
e.dataTransfer.effectAllowed='move';
e.dataTransfer.setData("Data",
e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0,0);
return true;
}
function enter(e)
{
return true;
}
function over(e)
{
var iddraggable =
e.dataTransfer.getData("Data");
var id = e.target.getAttribute('id');
if(id =='target1')
return false;
if((id =='target2')
&& iddraggable == 'draggable3')
return false;
else if(id =='target3')
&& (iddraggable == 'draggable1' ||
iddraggable =='draggable2'))
return false;
else
return true;
}
function drop(e)
{
var iddraggable =
e.dataTransfer.getData("Data");
e.target.appendChild
(document.getElementById(iddraggable));
e.stopPropagation();
return false;
}
function end(e)
{
e.dataTransfer.clearData("Data");
return true
}
</script>
</head>
<body>
<div id="target1"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop="return drop(event)">
<div id="draggable1" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)">1
</div>
<div id="draggable2" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)">2
</div>
<div id="draggable3" draggable="true"
ondragstart="return start(event)"
ondrag="return end(event)">3
</div>
</div>
<div id="target2"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop="return drop(event)">
</div>
<div id="target3"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop="return drop(event)">
</div>
</body>
</html>`
你错过了一线的开始治疗：
else if(id =='target3') &&
(iddraggable == 'draggable1' || iddraggable =='draggable2'))
return false;
它应该是这样的：
else if((id =='target3') &&
(iddraggable == 'draggable1' || iddraggable =='draggable2'))
return false;
这是你的代码工作：http://jsfiddle.net/p4hwqawL/2/ （有点......还需要改进。但错误消失了）