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学习之拖放（十）

最新文章

热门文章