脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 相关技巧 → Html5 拖拽复制

HTML5 拖拽复制功能的实现

 更新时间：2016年09月29日 08:38:27   作者：请叫我头头哥  
这篇文章主要介绍了HTML5 拖拽复制功能的实现的相关资料,需要的朋友可以参考下

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

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

浏览器支持

  1. Internet Explorer 9
  2. Firefox
  3. Opera 12
  4. Chrome
  5. 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);即可

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

您可能感兴趣的文章:

相关文章

  • 计算机网络日常练习题,每天进步一点点

    计算机网络日常练习题,每天进步一点点

    下面小编就为大家带来一篇计算机网络的几道练习题(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望可以帮到你
    2021-09-09
  • 浅析hosts 文件的作用及修改 hosts 文件的方法

    浅析hosts 文件的作用及修改 hosts 文件的方法

    hosts是一个没有扩展名的系统文件，其基本作用就是将一些常用的网址域名与其对应的 IP 地址建立一个关联“ 数据库 ”。接下来通过本文给大家介绍hosts 文件的作用及修改 hosts 文件的方法，需要的朋友参考下吧
    2018-01-01
  • URL编码表一览(推荐收藏)

    URL编码表一览(推荐收藏)

    有时候我们会碰到一些网页地址里面有一些%（百分号）组成的网址，其实这样的%与数字的组合就是一个符号。下面是URL编码表，大家可以对应下。
    2010-07-07
  • select下拉菜单实现二级联动效果

    select下拉菜单实现二级联动效果

    这篇文章主要介绍了select下拉菜单实现二级联动效果，在一些项目开发中经常会遇到这样的需求，今天小编通过实例代码给大家讲解，需要的朋友可以参考下
    2019-10-10
  • 解决使用commit提交大文件无法推送到远程库问题及git rebase使用详解

    解决使用commit提交大文件无法推送到远程库问题及git rebase使用详解

    这篇文章主要介绍了解决使用commit提交大文件无法推送到远程库问题及git rebase使用详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-07-07
  • Eclipse 格式化代码时不换行与自动换行的实现方法

    Eclipse 格式化代码时不换行与自动换行的实现方法

    每次用Eclipse自带的Ctrl+shift+f格式化代码时，如果原来的一行代码大于80列，Eclipse就会自动换为多行，这点个人感觉不是很舒服，简单试了一下，通过以下方式可以修改
    2009-05-05
  • VSCode设置网页代码实时预览的实现

    VSCode设置网页代码实时预览的实现

    这篇文章主要介绍了VSCode设置网页代码实时预览的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Git 教程之工作区、暂存区和版本库详解

    Git 教程之工作区、暂存区和版本库详解

    本文主要介绍Git 工作区、暂存区和版本库的知识，这里整理了详细的资料，有需要的小伙伴可以参考下
    2016-09-09
  • 基于Git的常用撤销技巧与解决冲突方法(推荐)

    基于Git的常用撤销技巧与解决冲突方法(推荐)

    下面小编就为大家带来一篇基于Git的常用撤销技巧与解决冲突方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望对大家有所帮助
    2017-11-11
  • VSCode gdb 调试 qemu u-boot 的方法详解

    VSCode gdb 调试 qemu u-boot 的方法详解

    这篇文章主要介绍了VSCode gdb 调试 qemu u-boot 的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06

最新评论