HTML5来回拖动实例

<html>
    <meta charset="utf-8">
    <script>
    //规定被拖动的数据
    function tdwhat(ev,obj)
    {
        ev.dataTransfer.setData("text",ev.target.id);
        ev.dataTransfer.setData("myval",obj);
    }
    function tding(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("text");
        var data1=ev.dataTransfer.getData("myval");
        ev.target.appendChild(document.getElementById(data));
        alert(data1);
    }
    function fxtd(ev)
    {
        ev.preventDefault();
    }
    </script>
    <body>
        <div id="t1" ondrop="tding(event)" ondragover="fxtd(event)" style="border:1px;width:200px;height:100px;background:green;">
            <div id="f1" draggable="true" style="background:yellow;" ondragstart="tdwhat(event,'yellow')">
    被拖动块</div>
            <div id="f2" draggable="true" style="background:gray;" ondragstart="tdwhat(event,'gray')">
    被拖动块</div>
        </div>
        <div id="t2" ondrop="tding(event)" ondragover="fxtd(event)" style="border:1px;width:200px;height:100px;background:red;">
        </div>
    </body>
</html>