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. 前端学习——css实用技术

    一,css控制文本样式 文本相关的css属性有很多,包括: color;font-size;font-weight;text-transform(大小写uppercase等);text-decorat ...

  2. 使用awk统计字段重复实践

    awk awk是一种规格化文件的分析工具, 主要处理对象类似数据库导出的条目文本文件, 其中一行,就对应一个记录,每个记录包含若干个字段. 类似这种文本: [root@www ~]# last -n ...

  3. MySQL-profiling的使用

    分析SQL执行带来的开销是优化SQL的重要手段.在MySQL数据库中,可以通过配置profiling参数来启用SQL剖析.该参数可以在全局和session级别来设置.对于全局级别则作用于整个MySQL ...

  4. .NET业务实体类验证组件Fluent Validation

    认识Fluent Vaidation. 看到NopCommerce项目中用到这个组建是如此的简单,将数据验证从业务实体类中分离出来,真是一个天才的想法,后来才知道这个东西是一个开源的轻量级验证组建. ...

  5. Java String类详解

    Java String类详解 Java字符串类(java.lang.String)是Java中使用最多的类,也是最为特殊的一个类,很多时候,我们对它既熟悉又陌生. 类结构: public final ...

  6. 《数据结构与算法分析:C语言描述_原书第二版》CH3表、栈和队列_reading notes

    表.栈和队列是最简单和最基本的三种数据结构.基本上,每一个有意义的程序都将明晰地至少使用一种这样的数据结构,比如栈在程序中总是要间接地用到,不管你在程序中是否做了声明. 本章学习重点: 理解抽象数据类 ...

  7. Ways to access Oracle Database in PostgreSQL

    Today, organizations stores information(data) in different database systems. Each database system ha ...

  8. PostgreSQL Replication之第十一章 使用Skytools（3）

    11.3 管理 pgq-queues Skytools 的一个核心组件是pgq.它提供了一个通用排队接口,它可以让您把消息从一个消息提供者传送到一个任意数目的接收者. 现在的问题是:一般来说,一个队列 ...

  9. bzoj3192 [JLOI2013]删除物品

    用数组表示两个栈,将两个栈的栈顶并在一起,用树状数组维护一下操作即可. 代码 #include<cstdio> #include<algorithm> #include< ...

  10. 在 msbuild 生成时，每次都生成很多css,js,img 文件，如果不想每次编译都有这些需要这样配置

    在 msbuild 不想生成一大堆文件,可以在 Web 项目的csproj 文件里,注释掉这一串. <!--<Import Project="$(VSToolsPath)\Web ...