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. set方法内存分析

    // //  main.m //  04-set方法的内存管理分析 // //  Created by apple on 14-3-17. // // #import <Foundation/F ...

  2. python urllib2 Basic认证

    1.通过添加http header 来实现 import urllib2 from base64 import encodestring url = 'http://202.108.1.51' use ...

  3. EBS安装提示libXtst.so.6: cannot open shared object file

    $ ./rapidwiz Rapid Install Wizard is validating your file system...... CMDDIR=/app/Stage122/startCD/ ...

  4. python中的yield

    在理解yield之前,要首先明白什么是generator,在理解generator之前首先要理解可迭代的概念. 可迭代(iterables)在你创建一个list的时候,可以逐个读取其中的元素,该逐个读 ...

  5. Servlet 3特性：异步Servlet

    解异步Servlet之前,让我们试着理解为什么需要它.假设我们有一个Servlet需要很多的时间来处理,类似下面的内容: LongRunningServlet.java package com.jou ...

  6. !! 浅谈Java学习方法和后期面试技巧

    浅谈Java学习方法和后期面试技巧 昨天查看3303回复33 部落用户大酋长 下面简单列举一下大家学习java的一个系统知识点的一些介绍 一.java基础部分:java基础的时候,有些知识点是非常重要 ...

  7. 【Origin】工仕途中

    -脚步翩跹,随蝶起舞,翩翩不知所往 晨起脚步催, 蝴蝶迎面飞; 正是春意浓, 三月好风景. -作于二零一六年三月二十八日

  8. [转]Hibernate不能自动建表解决办法及Hibernate不同数据库的连接及SQL方言

    最近开始学Hibernate,看的是李刚的那本<轻量级java ee企业应用实战>.头一个hibernate程序,我原原本本的按照书上例子写下来,同时只是改动了些mysql的连接参数,并且 ...

  9. Ruby操作Excel的方法与技巧大全

    测试工作中,批量的数据通常会放到excel表格中,测试输出的数据写回表格中,这样输入输出易于管理,同时清晰明了 使用ruby来操作excel文件首先需要在脚本里包含以下语句 require'win32 ...

  10. js 去除空格

    var MAX_PERIOD = $('#MAX_PERIOD').val(); // 借款的最大期限 MAX_PERIOD=Trim(MAX_PERIOD,"g");   //带 ...