我正在测试拖放元素。我打算稍后编辑它来做其他事情。现在我关注了一本名为 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;
这是你的代码在 fiddle 中工作:http://jsfiddle.net/p4hwqawL/2/
(有点......仍然需要改进。但错误消失了)
关于javascript - 无法理解为什么框不可拖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25873599/