Css Html5拖放代码不运行拖放事件_Css_Html

Css Html5拖放代码不运行拖放事件

css html

Css Html5拖放代码不运行拖放事件,css,html,Css,Html,我对Html5完全陌生，我的借口可能是代码中遗漏了一些实质性的或关键性的错误。我不明白为什么这个代码不起作用。对错误的解释将非常受欢迎拖放 #盒子1，盒子2{ 位置：相对位置；宽度：250px；高度：250px；利润率：10px；边框：1px纯黑；浮动：左； } 功能allowDrop（ev）{ ev.preventDefault（）； } 功能阻力（ev）{ ev.dataTransfer.setData（“内容”，ev.target.id）； } 功能下降（ev）{ ev.

我对Html5完全陌生，我的借口可能是代码中遗漏了一些实质性的或关键性的错误。我不明白为什么这个代码不起作用。对错误的解释将非常受欢迎


拖放
#盒子1，盒子2{
位置：相对位置；
宽度：250px；
高度：250px；
利润率：10px；
边框：1px纯黑；
浮动：左；
}
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“内容”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var image=ev.dataTransfer.getData（“内容”）；
ev.target.appendChild（document.getElementById（image））；
}

HTML中的一个关键错误是，

id-“box\u 1”

。-应该是这样的=符号，

id=“box\u 1”

。我会设法解决你的问题，但那是一个严重的错误。这是一个经过清理的

HTML

jsfiddle，.Haha OMG是的，我刚刚意识到再次查看代码是facepalm，但是谢谢你Jonathan:）现在代码工作得很好。

<head>
<title>Drag and Drop</title>

<meta charset-"UTF-8">

<style type="text/css">
    #box_1, #box_2{
            position:   relative;
            width:      250px;
            height:     250px;
            margin:     10px;
            border:     1px solid black;
            float:      left;
    }
    </style>

    <script type="text/javascript">

    function allowDrop(ev){
        ev.preventDefault();

    }
    function drag(ev){
        ev.dataTransfer.setData("content", ev.target.id);
    }
    function drop(ev){
        ev.preventDefault();
        var image= ev.dataTransfer.getData("content");
        ev.target.appendChild(document.getElementById(image));

    }
    </script>
     </head>
     <body>
    <div id-"box_1" ondrop-"drop(event)" ondragover-"allowDrop(event)">
            <img src="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg" alt="logo" id="logo" draggable="true" ondragstart-"drag(event)"
            width= 100px;
            height=100px;/>
    </div>
    <div id-"box_2" ondrop="drop(event)" ondragover-"allowDrop(event)">
    </div>
    </body>
    </html>