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);即可

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

您可能感兴趣的文章:

Idea 2019.3 本应该搜索到的插件却搜索不到的解决方法
这篇文章主要介绍了Idea 2019.3 本应该搜索到的插件却搜索不到,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
Cookie 的 SameSite 属性小结
Chrome 51 开始，浏览器的 Cookie 新增加了一个SameSite属性，用来防止 CSRF 攻击和用户追踪，下面在通过本文给大家详细介绍下SameSite 属性的相关知识，感兴趣的朋友一起看看吧
2021-10-10
Sublime Text 4 安装Package Control的详细步骤
最近换了台电脑安装了Sublime Text 4但是按照之前的方法Package Control怎么也安装不上，查阅很多资料多次尝试发现Sublime Text 4可以直接安装不需要之前那些步骤，下面小编把安装步骤分享给大家，需要的朋友参考下吧
2022-01-01
VSCode 使用Settings Sync同步配置(最新版教程,非常简单)
这篇文章主要介绍了VSCode 使用Settings Sync同步配置(最新版教程,非常简单)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
git设置用户名密码的示例代码
这篇文章主要介绍了git设置用户名密码的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
手把手教你将Vim改装成一个IDE编程环境(图文) 吴垠
这篇文章主要介绍了手把手教你将Vim改装成一个IDE编程环境(图文) 吴垠 ,需要的朋友可以参考下
2016-01-01
VScode 隐藏大量无用的文件比如在看Linux kernel或boot时候
这篇文章主要介绍了VScode 隐藏大量无用的文件比如在看Linux kernel或boot时候,VScode 工程创建先在 Ubuntu 下编译一下 uboot，然后将编译后的 uboot 文件夹复制到 windows 下，并创建VScode 工程，需要的朋友可以参考下
2022-10-10
IDEA怎么切换Git分支的实现方法
这篇文章主要介绍了IDEA怎么切换Git分支的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
VS2019如何查看类图的方法实现
这篇文章主要介绍了VS2019如何查看类图的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
千万要避免的五种程序注释方式小结
你是否有过复查程序时发现有些注释毫无用处？程序注释是为了提高代码的可读性，为了让原作者以外的其他开发人员更容易理解这段程序。
2011-10-10

HTML5 拖拽复制功能的实现

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具