HTML5 拖拽复制功能的实现

更新时间：2016年09月29日 08:38:27 作者：请叫我头头哥

这篇文章主要介绍了HTML5 拖拽复制功能的实现的相关资料,需要的朋友可以参考下

拖拽是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖拽是标准的一部分，任何元素都能够拖拽。 Html5拖拽非常常见的一个功能，但是大部分拖拽的案例都是一个剪切的过程，项目中需要实现Html5拖拽复制的功能，Html5拖拽复制很简单，只需要在普通Html5拖拽的过程中做一点小小的改动即可。

ps: 本篇博文为非首页文章,只是简单的笔记。

浏览器支持

Internet Explorer 9
Firefox
Opera 12
Chrome
Safari 5

v1.0代码部分

<!DOCTYPE html>
<html>
<head>
  <styletype="text/css">
    #div1 {
      width: 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);即可

通过此文，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

Git安装详细图文教程(Git 安装过程的每一个步骤)
这篇文章主要介绍了Git安装详细图文教程(Git 安装过程的每一个步骤),本文以Git-2.35.1.2-64-bit.exe为例给大家讲解安装过程，需要的朋友可以参考下
2023-02-02
sqoop如何指定pg库的模式(方法详解)
sqoop是一个用来将hadoop中hdfs和关系型数据库中的数据相互迁移的工具，可以将一个关系型数据库（mysql、oracle等）中的数据导入到hadoop的hdfs中，也可以将hdfs的数据导入到关系型数据库中，本文给大家介绍sqoop如何指定pg库的模式，一起看看吧
2022-01-01
关于IDEA中Git暂存代码的使用
本文主要介绍了关于IDEA中Git暂存代码的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
详解RIFF和WAVE音频文件格式
本文主要介绍了RIFF文件的格式和WAV音频文件格式，为后面实现对WAVE文件的读写打一个理论基础。后面打算使用C++标准库，实现对WAV文件的读写
2022-01-01
图片的色彩空间问题
不知有多少朋友遇到此类问题：在PS里处理好的图，发到论论坛上以后发现图片颜色大变，变得灰蒙蒙，失去了层次，色彩生硬，还有点发青
2014-05-05
IDEA中alt+ enter快捷键失效/没用时该怎么办(详细版)
IDEA里有一个万能快捷键(alt enter)功能非常强大,同一个快捷键,可以根据不同的语境提示你不同的操作,这篇文章主要给大家介绍了关于IDEA中alt+ enter快捷键失效/没用时该怎么办的相关资料,需要的朋友可以参考下
2023-12-12
在VScode中创建你的代码模板的方法
这篇文章主要介绍了在VScode中创建你的代码模板的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Sublime中View in Browser功能不生效问题及解决
这篇文章主要介绍了Sublime中View in Browser功能不生效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
github访问速度慢的问题完美解决
这篇文章主要为大家介绍了github访问速度慢的问题完美解决方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
写给正在读计算机专业的同学该如何学习
现在IT新技术日新月异。就常用编程语言而言,有c/c++、汇编、java，c#、Python等；操作系统平台有unix/linux，windows系列
2009-11-11