【发布时间】：2014-09-16 16:09:41
【问题描述】：
我正在测试拖放元素。我打算稍后对其进行编辑以做其他事情。现在我在关注一本名为 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>`
【问题讨论】：
标签： javascript css html drag-and-drop draggable