HTML5学习之拖放(十)

l元素可以用于拖拽必须设置draggable="true"属性,img和a标签除外,她们两个默认就可以被拖拽
想做拖拽处理,就需要在Dom元素上监听拖放的事件:dragstart,drag,dragenter,dragover,dragleve,drop,dragend

在文档中,默认document最先触发以上事件,而默认的处理是阻止页面元素的变化,想人为的控制拖拽的元素的变化需要我们改动代码。所有必需去掉document的默认处理

 document.ondragover = function(e) {

            e.preventDefault();

        };

        document.ondrop = function (e) {

            e.preventDefault();

        };

拖拽事件event中属性:dataTransfer是传递数据的关键。使用dataTransfer的setData(“Text",data)方法,把要拖拽的数据放到dataTransfer中,在拖拽完毕的事件中,再从中取出数据,用方法:getData("text/plain");

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        #d1, #d2 {

            width:200px;

            height:200px;



            border:1px solid gray;

            float:left;

            margin-right:20px;

        }



    </style>

    <script>

        function drag(e) {

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

        }



        function dragover(e) {

            e.preventDefault();

        }





        function move1(e) {

            e.preventDefault();

            var id = e.dataTransfer.getData("Text");

            e.target.appendChild(document.getElementById(id));

        }

    </script>

</head>

<body>

     <div id="d1" ondragover="dragover(event)" ondrop="move1(event)">

         <img id="i1" src="ts.gif" draggable="true" ondragstart="drag(event)" /><br />

         <a id="Img1"  draggable="true" ondragstart="drag(event)">把我也拖走吧!</a>

    </div>







    

    <div id="d2" ondragover="dragover(event)" ondrop="move1(event)"></div>

</body>

</html>

 

你可能感兴趣的:(html5)