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. Android 用Animation-list实现逐帧动画

    第一步:先上图片素材,以下素材放到res/drawable目录下: http://blog.csdn.net/aminfo/article/details/7847761 图片素材: 文件名称: ic ...

  2. H3C Series Router MSR26-00与F3736 VPN IP SEC

    注:建立链接之后经常断线,需要两边进行PING通才可以.待解决.

  3. django 一些库

    https://django-adminactions.readthedocs.io/en/latest/actions.html http://www.ziqiangxuetang.com/djan ...

  4. ios_图片放大的两种方式transform和frame

    frame改变x值y值的方式放大图片,是从左上开始放大. frame改变控件宽高的方式放大图片,是从中心开始放大. 原头像大小 用frame改变宽高 transform方式放大图片,从中心开始放大

  5. AXIS2调用web service，返回结果用GZIP解压缩

    import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.IOExceptio ...

  6. 安装shopex注意事项

    [原创]关于PHP5.3.x和Zend Optimizer(Zend Guard Loader),以及shopex4.8.5安装的问题  http://dzmailbox.blog.163.com/b ...

  7. 锋利的jQuery

    今天总要找点东西学习,其实有很多东西要记录,慢慢写,今天看书吧,这几天把这本书看完,这里记一些要点 从头开始记吧 第一章 认识jQuery $就是jQuery的简写 $(function(){}) 就 ...

  8. 体验Java的封装性

    package com.cnblogs.java; //体验Java的封装性 /* * 如下的人类年龄赋值-300岁,显然很不合理,这种直接对类的属性赋值,有时候虽然不合理但却会编译通过. * 所以我 ...

  9. 设置searchBar上右边取消按钮的颜色

    [[UIBarButtonItem appearanceWhenContainedIn: [UISearchBar class], nil] setTintColor:RGBA(0, 161, 176 ...

  10. Python学习总结10：获取shell输出结果

    Python中获取shell命令的输出结果的常见方法如下几种: 1. import subprocess output = subprocess.Popen(['ls','-l'],stdout=su ...