html5,drag and drop 拖拽出错

<body>
    <div id="content">
        <div id="source">
            <div id="touch-source" draggable="true" ondragstart="drag(event)">
                <span class="title">景点</span>
            </div>
    </div>
        <div id="target" ondrop="drop(event)" ondragover="allowDrop(event)">
        </div>
    </div>        
    <script>
            function drag(ev){
                ev.dataTransfer.setData("Text",ev.target.id);
            };

            function allowDrop(ev){
                ev.preventDefult();
            };
            function drop(ev){
                ev.preventDefault();
                var data = ev.dataTransfer.getData("Text");
                ev.target.appendChild(document.getElementById(data));
            };

    </script>
</body>

报错：TypeError: ev.preventDefult is not a function

TypeError: ev.preventDefult is not a function 根据错误提示就知道是ev.preventDefult写错了，其实仔细想一下这个提示你应该就恍悟了。改对了就可以拖拽了，已试。

<!DOCTYPE html>
<head>
    <title>test</title>
</head>
<body>
    <div id="content">
        <div style="width: 100px;height: 100px;background: orange;" id="source">
            <div id="touch-source" draggable="true" ondragstart="drag(event)">
                <span class="title">景点</span>
            </div>
        </div>
        <div style="width: 100px;height: 100px;background: #ec1611;" id="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </div>        
    <script>
            function drag(ev){
                ev.dataTransfer.setData("Text",ev.target.id);
            };

            function allowDrop(ev){
                ev.preventDefault();
            };
            function drop(ev){
                ev.preventDefault();
                var data = ev.dataTransfer.getData("Text");
                ev.target.appendChild(document.getElementById(data));
            };

    </script>
</body>

因为你的字写错了，应该是:

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

你少了a

TypeError: ev.preventDefult is not a function 意思就是ev.preventDefult写错了。

【热门文章】