Question

我对Html5完全不熟悉，我的借口可能会遗漏代码中的一些实质性或严重错误。我无法弄清楚为什么这段代码不起作用。错误的解释将受到欢迎。

<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>

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

0 个答案: