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 ...
随机推荐
- MySQL知识总结
一.基础 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...
- 最小生成二叉树-prim算法
1.prim算法:一种计算生成最小生成树的方法,它的每一步都会为一棵生长中的树添加一条边. 2.时间复杂度:
- 从零开始学Python第0周：Python基本介绍（部分内容来源于网络）
Python入门介绍 一,Python的基本介绍 (1)概要 Python是一种解释型,面向对象,动态数据类型的高级程序设计语言.常被广泛用于处理系统管理任务和web编程.现如今Python已经成为了 ...
- [javaSE] 反射-Class类的基本操作
获取类的名称 获取该类的方法 获取方法的返回值类型 获取方法的名称 获取方法的参数的类型 package com.tsh.reflect; import java.lang.reflect.Metho ...
- 配置WCF Test Client
用vs2010建立了一个wcf项目,通过F5直接运行那服务文件,就出现了一个”The dependent tool 'svcutil.exe' is not found“, , 之后想通过“tool- ...
- 用纯CSS创建一个三角形
原理:把上.左.右三条边隐藏掉(颜色设为 transparent) #demo { width:; height:; border-width: 20px; border-style: solid; ...
- CSS3 学习笔记
border-radius 圆角是做网页永远绕不过的话题,以前基本是通过背景图片做的,有了 CSS3 以后通过属性就 能够搞定,我们可以通过 border-radius 设置元素的圆角半径. bord ...
- Autodesk招聘开发咨询顾问（北京或上海），需要内推的扔简历过来啊
Autodesk现招聘两位二次开发技术顾问,为正式编制.享受所有Autodesk优越的福利资源(额外商业保险,公积金全部由公司支付,年度奖金,季度礼物, 节日礼物, 15天年假,不定期的培训...). ...
- NDK-JNI实战教程（二） JNI官方中文资料
声明 设计概述 JNI接口函数和指针 加载和链接本地方法 解析本地方法名 本地方法的参数 引用Java对象 全局和局部引用 实现局部引用 访问Java对象 访问基本类型数组 访问域和方法 报告编程错误 ...
- 如何处理 android 方法总数超过 65536 . the number of method references in a .dex file exceed 64k
一:问题描述: 应用中的Dex 文件方法数超过了最大值65536的上限,简单来说,应用爆棚了. 二.解决方案: 方案1:使用插件化框架 比如: https://github.com ...