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);即可
作 者：请叫我头头哥
出 处：http://www.cnblogs.com/toutou/
关于作者：专注于微软平台的项目开发。如有问题或建议，请多多赐教！
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！
//
Html5拖拽复制的更多相关文章
- HTML5 拖拽复制功能的实现方法
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...
- html5拖拽
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- 基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
- 实现拖拽复制和可排序的react.js组件
在实现复制前,对之前的拖拽排序组件属性进行了修改. 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant de ...
- HTML5 拖拽实现
简介: 最早在网页中引入JavaScript拖放功能是IE4.当时,网页中只有两种对象可以拖放:图像和某些文本.拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它.拖放文本时,要先选中文本,然后可 ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- html5拖拽总结
拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...
随机推荐
- Scalaz（29）－ Free ：Coyoneda - Functor for free
很多时候我们会遇到一些高阶类型F[_],但又无法实现它的map函数,也就是虽然形似但F不可能成为Functor.看看下面的例子: trait Interact[A] case class Ask(pr ...
- Scalaz（10）－ Monad：就是一种函数式编程模式－a design pattern
Monad typeclass不是一种类型,而是一种程序设计模式(design pattern),是泛函编程中最重要的编程概念,因而很多行内人把FP又称为Monadic Programming.这其中 ...
- POJ 1061 青蛙的约会 扩展欧几里得
扩展欧几里得模板套一下就A了,不过要注意刚好整除的时候,代码中有注释 #include <iostream> #include <cstdio> #include <cs ...
- （3）JSTL的fn方法库
fn:functions,fn之所以称之为方法库,是因为fn使用不像core,fmt标签那样遵循<prefix:tagName>的格式,而是遵循fn:methodName()的格式 < ...
- Properties+重温Map+本地计数器
昨天想写一个记账本,发现并不能把项目名称与内容关联起来,于是乎我想到了map,可是又不知道map储存到文件中又怎么读出来,幸好今天遇到了properties Properties是Hashtable的 ...
- 经典案例：那些让人赞不绝口的创新 HTML5 网站
在过去的10年里,网页设计师使用 Flash.JavaScript 或其他复杂的软件和技术来创建网站.但现在你可以前所未有的快速.轻松地设计或创造互动的.有趣好看的网站.如何创建?答案是 HTML5 ...
- Hybrid框架UI重构之路：四、分而治之
上文回顾:Hybird框架UI重构之路:三.工欲善其事,必先利其器 上一篇文章有说到less.grunt这两个工具,是为了css.js分模块使用的.UI框架提供给使用者的时候,是一个大的xxx.js. ...
- JavaScript中的普通函数与构造函数比较
问题 什么是构造函数?构造函数与普通函数区别是什么?用new关键字的时候到底做了什么?构造函数有返回值怎么办?构造函数能当普通函数调用吗? thisthis永远指向当前正在被执行的函数或方法的owne ...
- 从零开始，做一个NodeJS博客（一）：Heroku上的最简NodeJS服务器
标签:NodeJS,Heroku 0 这里是这个伪系列的第一篇,因为我也不知道自己能不能做完,然后到底能做成什么样子.总之,尽力而为吧,加油. 1 Heroku App 的构成 Heroku 所谓的 ...
- CSS常用样式（一）
一.字体样式 1.font-style:设置或检索对象中的文本字体样式. 取值: normal:指定文本字体样式为正常的字体 italic:指定文本字体样式为斜体.对于没有斜体变量的特殊字体,将应用o ...