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学习1
    时域和频域
    win10 + VS2017 + MNN 编译使用
    深度学习笔记(二十二)Structure-Preserving Neural Style Transfer
    miRNA分析
    mRNA分析
    代谢组学分析
    实证分析
    React---新扩展RenderProps和ErrorBoundary
    React---新扩展Context和组件优化
  • 原文地址:https://www.cnblogs.com/2881064178dinfeng/p/6187821.html
Copyright © 2011-2022 走看看