拖拽是一种常见的特性，即抓取对象以后拖到另一个位置。 在 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);即可

作　　者：请叫我头头哥

出　　处：http://www.cnblogs.com/toutou/

关于作者：专注于微软平台的项目开发。如有问题或建议，请多多赐教！

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！

//

Html5拖拽复制的更多相关文章

  1. HTML5 拖拽复制功能的实现方法

    Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...

  2. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  3. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  5. 基于html5拖拽api实现列表的拖拽排序

    基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

  6. 实现拖拽复制和可排序的react.js组件

    在实现复制前,对之前的拖拽排序组件属性进行了修改. 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant de ...

  7. HTML5 拖拽实现

    简介: 最早在网页中引入JavaScript拖放功能是IE4.当时,网页中只有两种对象可以拖放:图像和某些文本.拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它.拖放文本时,要先选中文本,然后可 ...

  8. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. html5拖拽总结

    拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...

随机推荐

  1. C语言关键字、标识符和注释

    一.关键字 C语言提供的有特殊含义的符号,共32个. 在Xcode中关键字全部高亮显示,关键字全部都为小写.如return.int等. 二.标识符 定义:标识符是程序员在程序中自定义的一些符号和名称. ...

  2. 2015 - 准备读书List

    时刻提醒自己,不进步意味着倒退. 2015年准备读完的技术书籍: 1. <Redis设计与实现>

  3. AES .net 、JS 相互加密解密

    /// <summary> /// AES加密 /// </summary> public class AES { /// <summary> /// 加密 /// ...

  4. Apple Watch PSD 源文件【免费素材下载】

    Apple Watch 是苹果公司于2014年9月发布的一款智能手表.分为运动款.普通款和定制款三种,采用蓝宝石屏幕,有银色,金色,红色,绿色和白色等多种颜色可以选择.这里分享的是 Apple Wat ...

  5. 12款免费的响应式 WordPress 主题下载

    响应式和现代设计风格的多用途 WordPress 主题能够非常灵活的适应所有设备.而高级主题能够更轻松定制,您可以从主题选项中禁用/启用响应模式.多用途的响应式设计的主题是最适合杂志网站,博客网站,想 ...

  6. [整理]详记被忽略的Get与Post

    [事发]使用了近5年的项目,来了一个最最基本的bug画面输入+号,跳转至后画面,+号变成了空格![原因]画面使用url(get)方法传参数,并且没有进行url转码!恐怖的是,几乎所有页面都是如此... ...

  7. 详细解读XMLHttpRequest（一）同步请求和异步请求

    本文主要参考:MDN XMLHttpRequest 让发送一个HTTP请求变得非常容易.你只需要简单的创建一个请求对象实例,打开一个URL,然后发送这个请求.当传输完毕后,结果的HTTP状态以及返回的 ...

  8. 深入理解：JavaScript原型与继承

    深入理解:JavaScript原型与继承 看过不少书籍,不少文章,对于原型与继承的说明基本上让人不明觉厉,特别是对于习惯了面向对象编程的人来说更难理解,这里我就给大家说说我的理解. 首先JavaScr ...

  9. Linux学习心得之 jnlp的文件和java应用程序安全设置

    作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 jnlp的文件和java应用程序安全设置 1.前言2. jnlp的文件打开3.java应用程 ...

  10. Excel里生成GUID

    Private Declare Function CoCreateGuid Lib "ole32" (id As Any) As Long    Private Function ...