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

HTML5 拖拽复制功能的实现方法的更多相关文章

  1. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  2. html5拖拽

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

  3. duilib中控件拖拽功能的实现方法（附源码）

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件增加拖拽的功能,而实际 ...

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

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

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

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

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

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

  7. HTML5拖拽实例

    最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...

  8. 火狐html5拖拽 弹出新页面解决办法

    今天做项目时,需要实现一个拖拽排序的功能,遂想到了html5的拖拽,便开始查资料,写代码.功夫不复有心人,通过网上资料作参考,排序功能成功实现.谷歌浏览器测试,拖拽平滑,无问题.火狐浏览器测试时,却无 ...

  9. HTML5拖拽事件笔记

    在HTML5的规范中,我们可以通过为元素增加`draggable="true"`来设置此元素是否可以进行拖拽操作,其中图片.链接默认是开启的. 1. 拖拽元素:设置了`dragga ...

随机推荐

  1. [BS-26] UIView、pop和Core Animation区别

    UIView.pop和Core Animation区别 一.UIView.pop和Core Animation的主要区别 1. Core Animation的动画只能添加到layer上(layer.p ...

  2. 详解Java中的clone方法：原型模式

    转:http://developer.51cto.com/art/201506/478985.htm clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的 ...

  3. iOS 获取快递物流信息（GCD异步加载）

    #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...

  4. 使用 jQuery Deferred 和 Promise 创建响应式应用程序

    这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首 ...

  5. Cocoapods注意点

    1 安装和升级$ sudo gem install cocoapods $ pod setup 2 更换为taobao的源 $ gem sources -r https://rubygems.org/ ...

  6. PostgreSQL中initdb做了什么

    在使用数据库前,是启动数据库,启动数据库前是initdb(初始化数据库):一起来看一下initdb做了什么吧. 初始化数据库的操作为: ./initdb -D /usr/local/pgsql/dat ...

  7. 新建一个Activity通过按钮打开它，再通过按钮关闭它

    首先需要创建一个供打开和关闭的Activity,先在scr下当前项目的包中创建一个新类Activity1, 并选择让其继承自Activity类,如下图所示: 之后配置AndroidMainifest. ...

  8. java系统时间的调用和格式转换

    java在java.text   java.util   java.lang包中查找 import java.util.*; import java.text.*; public class Text ...

  9. 我与 美国作家 21天精通C++ 作者 Rao的对话：

    这就是动力呀!

  10. Java SE series:1. environment configure and Hello world! [We use compiler and packager to create an application!]

    1. cli (command line interface) and gui (graphic user interface) use javahome path, search classpath ...