zoukankan      html  css  js  c++  java
  • HTML5--拖动01

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>拖动</title>
        <style type="text/css">
            /*--04--*/
            #cun{
                background-color: cornflowerblue;
                 500px;
                height: 200px;
            }
            #tuo{
                background-color: blue;
                 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>
    

      

  • 相关阅读:
    10003 Cutting Sticks(区间dp)
    Cocos2d-x init() 和 onEnter() 区别
    HDU1181【有向图的传递闭包】
    空间参考系统与WKT解析
    面试经典-分金条
    uvalive 3971
    lua学习:使用Lua处理游戏数据
    面试经典--两个房间 每间房间三盏灯
    浙江大学PAT上机题解析之2-11. 两个有序链表序列的合并
    顺序队列之C++实现
  • 原文地址:https://www.cnblogs.com/zjsy/p/4738069.html
Copyright © 2011-2022 走看看