zoukankan      html  css  js  c++  java
  • HTML5 拖拽复制功能的实现方法

    Internet Explorer 9
    Firefox
    Opera 12
    Chrome
    Safari 5

    v1.0代码部分

    <!DOCTYPE html>
    <html>
    <head>
    <styletype="text/css">
    #div1 {
    700px;
    height: 120px;
    padding: 10px;
    border: 1px solid #aaaaaa;
    }

    #drag1 {
    cursor:pointer;
    }
    </style>
    <scripttype="text/javascript">
    function allowDrop(ev) {
    ev.preventDefault();
    }

    function drag(ev) {

    ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var item = document.getElementById(data).cloneNode();
    ev.target.appendChild(item);
    }
    </script>
    </head>
    <body>
    <p>请把 windows Azure 的图片拖放到矩形中:</p>
    <divid="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <imgid="drag1" src="http://www.cnblogs.com/images/cnblogs_com/toutou/699740/t_Azure.png" draggable="true" ondragstart="drag(event)"/>
    </body>
    </html>

    代码解析

    实现思路就是克隆被拖拽的元素,然后把克隆元素appendChild()到指定位置

    实现Html5拖拽复制的核心代码.cloneNode()

    Html5拖拽复制完成以后,其实还有很多事情可以在appendChild()执行以后完成,这个看具体需求吧

    如果只是想实现传统的HTML5拖拽的话,移除var item = document.getElementById(data).cloneNode();,然后ev.target.appendChild(data);即可

  • 相关阅读:
    QT之QRect函数QRect::adjust()函数
    QT 正则表达式(进阶篇)IP,端口号,文件名,非空格字符的匹配,已验证
    QT 正则表达式(基础篇)
    处理不平衡数据的策略
    记录一下ssh,nfs安装步骤
    用户偏好的回归预测推荐
    SVD++分解
    BiasLFM分解
    WALS分解
    ALS分解
  • 原文地址:https://www.cnblogs.com/2881064178dinfeng/p/6187821.html
Copyright © 2011-2022 走看看