HTML5代码学习（10）拖放-职坐标

HTML5代码学习（10）拖放

沉沙 2018-11-06 来源：阅读 1203 评论 0

摘要：本篇教程探讨了HTML5代码学习（10）拖放，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5代码学习（10）拖放，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

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="//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>