HTML5拖动

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #div1,#div2{width:350px;height:150px;padding:10px;border:1px solid #aaaaaa;text-align: center;}

        #div2{margin-top: 50px;}

        div img{

            height: 130px;

        }

    </style>

</head>

<body>

    <div id="div1" ondrop="drop1(event)" ondragover="allowDrop1(event)">

        <!--为了让元素可拖动，设置 draggable='true'-->

        <img src="http://img.hb.aicdn.com/e0ecf0d449916dd1c762899facf51f782769b1c310b7c-bDfMIu_fw658" draggable="true" ondragstart="drag(event)" id='dra'/>

    </div>

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

<script>

    //ondragover-- 在拖动的时候阻止浏览器默认事件

    function allowDrop(ev){

        ev.preventDefault();

    }

    function allowDrop1(ev){

        ev.preventDefault();

    }

    //ondragstart  拖动开始的时候触发该事件

    function drag(e){

        //dataTransfer.setData() 方法设置被拖数据的数据类型和值：

        e.dataTransfer.setData("Text",e.target.id);

        //数据类型是 "Text"，值是可拖动元素的 id ("dra")。

    }

    //  ondrop 拖动完成放置在该元素中的时候除非该事件

    function drop(e){

        var data= e.dataTransfer.getData('Text');//---接收数据

        e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域

        e.preventDefault();

    }

    function drop1(e){

        var data= e.dataTransfer.getData('Text');//---接收数据

        e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域

        e.preventDefault();

    }

</script>

</html>
相关文章
