HTML5--拖动01

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>拖动</title>
    <style type="text/css">
        /*--04--*/
        #cun{
            background-color: cornflowerblue;
            width: 500px;
            height: 200px;
        }
        #tuo{
            background-color: blue;
            width: 500px;
            height: 200px;
        }
    </style>
    <script type="text/javascript">
        //--02--
        function drag(e){
            document.getElementById("st").innerHTML="开始拖动：drang(event)"+e.target.id;
            //使用setData(数据类型,携带的数据)，将要多方的数据，存入dataTransfer对象中:键值对
            e.dataTransfer.setData("Text", e.target.id);
        }
        //--05--
        function allowDrop(e){
            //不执行默认处理（默认：拒绝拖放）
            e.preventDefault();
            document.getElementById("allow").innerHTML="拖到了指定地点：drop(event):"+e.dataTransfer.getData("Text");
        }
        //--06--
        function drop(e){
            //不执行默认处理（默认：拒绝拖放）
            e.preventDefault();
            document.getElementById("ov").innerHTML="拖到了指定地点：drop(event):"+e.dataTransfer.getData("Text");
            //使用getData()获取数据，然后赋值给data：键值对获取
            var data= e.dataTransfer.getData("Text");
            //使用appendChild()方法把拖动的节点元素，放到子元素中
            e.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>
<!--03-->
<div id="cun" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>
<!--01-->
<img id="tuo" src="imgs/img.jpg" draggable="true" ondragstart="drag(event)" width="500px" height="200px">
<br>开始：<span id="st"></span>
<br>允许：<span id="allow"></span>
<br>到达：<span id="ov"></span>
</body>
</html>
posted @ 2015-08-17 23:06 第二天半阅读(206) 评论(0) 收藏举报
刷新页面返回顶部