Javascript 无法理解为什么箱子不能拖动_Javascript_Css_Html_Drag And Drop_Draggable

Javascript 无法理解为什么箱子不能拖动

javascript css html

Javascript 无法理解为什么箱子不能拖动,javascript,css,html,drag-and-drop,draggable,Javascript,Css,Html,Drag And Drop,Draggable,我正在测试拖放元素。我打算以后编辑它来做其他事情。现在我读了一本名为Sams自学HTML5的书。我严格遵守了代码，但由于某种未知的原因，它拒绝让拖放工作。我使用了最新的Internet explorer Mozilla Firefox和Google Chrome。我试过4种不同的代码验证程序，但都没有用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Drage

我正在测试拖放元素。我打算以后编辑它来做其他事情。现在我读了一本名为Sams自学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;

下面是您的代码：

有点仍然需要改进。但是错误消失了

非常感谢。这几天我一直在挠头，哈哈。只是在书中看了一下，它也不见了lol@NathanR.Watkins，只是一个提示。。。始终识别代码，这样就更容易针对这样的错误；