H5中元素的拖放

<img draggable="true">

<!-- img可以拖动，拖动时调用函数drag（event），规定被拖动的数据-->
<img id="drag1" src="/omages/lodo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

<!-- 数据类型是 "Text"，值是可拖动元素的 id ("drag1")-->
function drag(ev)
{
 ev.dataTransfer.setData("Text",ev.target.id);
}

ev.preventDefault()

//ondrop 属性调用了一个函数，drop(event)
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

function drop(ev)
{
    //drop 事件的默认行为是以链接形式打开
    ev.preventDefault();
    //通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    //被拖数据是被拖元素的 id ("drag1")
    var data=ev.dataTransfer.getData("Text");
//把被拖元素追加到放置元素（目标元素）中
    ev.target.appendChild(document.getElementById(data));
}

<div id="div1" ondrop="drap(event)" ondragover="allDrap(event)"></div>
<em draggable="true" ondragstart="drop(event)" id="drag1">放进去</em>
<script>
    function allDrap(ev){
        ev.preventDefault();
    }
    function drop(ev){
        ev.dataTransfer.setData("Text",ev.target.id);

    }
    function drap(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data))
    }
</script>