zoukankan      html  css  js  c++  java
  • HTML5拖放

    拖放,即将一个东西拖到另一个位置。

    案例1:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    #div1,#div2 {200px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script type="text/javascript">
    function allowDrop(ev)
    {
    ev.preventDefault();
    }
    //ev.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }
    //setData-----以指定格式给dataTransfer对象赋予数据,id("drag1");
            function drop(ev)
    {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }
    //调用preventDefault()来避免浏览器对数据的默认处理(drop事件的默认行为是以链接形式打开);
    //getData--------通过dataTransfer对象从剪贴板获取指定格式的数据,id("drag1");
    //appendChild----把被拖动元素追加到放置元素后;

    </script>
    </head>
    <body>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br/>
    <img id="drag1" src="download.png" draggable="true" ondragstart="drag(event)" />

    //ondrop----------进行放置;
    //ondragover------把图片拖动到哪里;

    //draggable-------属性设置为true,即图片可拖动;

    //ondragstart-----拖动图片;

    </body>
    </html>

    效果图:(浏览器支持情况下)

                          

    
    
    
  • 相关阅读:
    php根据时间显示刚刚,几分钟前,几小时前的实现代码
    PHP中获取当前页面的完整URL
    PhpExcel中文帮助手册|PhpExcel使用方法
    洛谷P1781 宇宙总统【排序+字符串】
    洛谷P1579 哥德巴赫猜想(升级版)【水题+素数】
    洛谷P1478 陶陶摘苹果(升级版)【水题】
    洛谷P1002 过河卒【dp】
    51Nod
    排序算法总结(C++)
    UVA1339
  • 原文地址:https://www.cnblogs.com/bingling2015/p/4409662.html
Copyright © 2011-2022 走看看