-
Html5拖拽复制
v博客前言
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置。 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽。 Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需要实现Html5拖拽复制的功能,Html5拖拽复制很简单,只需要在普通Html5拖拽的过程中做一点小小的改动即可。
ps: 本篇博文为非首页文章,只是简单的笔记。
<!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>
ps: 本篇博文为非首页文章,只是简单的笔记。
浏览器支持
Internet Explorer 9
Firefox
Opera 12
Chrome
Safari 5
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>
代码解析
实现思路就是克隆被拖拽的元素,然后把克隆元素
实现Html5拖拽复制的核心代码
Html5拖拽复制完成以后,其实还有很多事情可以在
如果只是想实现传统的HTML5拖拽的话,移除
appendChild()
到指定位置实现Html5拖拽复制的核心代码
.cloneNode()
Html5拖拽复制完成以后,其实还有很多事情可以在
appendChild()
执行以后完成,这个看具体需求吧如果只是想实现传统的HTML5拖拽的话,移除
var item = document.getElementById(data).cloneNode();
,然后ev.target.appendChild(data);
即可
作 者:请叫我头头哥
出 处:http://www.cnblogs.com/toutou/
出 处:http://www.cnblogs.com/toutou/
最新更新
Python获取微信好友数据
Python 的排序方法 sort 和 sorted 的区别
WinForm轻松实现自定义分页 (转载)
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
在win系统安装配置 Memcached for PHP 5.3 图文
箱图在数据预处理中的应用
Python WEB开发:用Tornado框架制作简易【表
自从学会了用python解析视频,都不用去找
Python代码阅读(第50篇):对列表间隔取
Python爬虫+数据分析+可视化展示,分析《
MongoDB常用命令(2)
MongoDB基本介绍与安装(1)
SQLServer触发器调用JavaWeb接口
SQL Server索引的原理深入解析
SqlServer2016模糊匹配的三种方式及效率问题
SQL中Truncate的用法
sqlserver 多表关联时在where语句中慎用tri
链接服务器读取Mysql---出现消息 7347,级别
SQL Server解惑——为什么你拼接的SQL语句换
MySQL视图了解一下
laf.js - 开源的云开发框架(README.md)
javascript创建对象
Node.js 源码分析 - 从 main 函数开始
Node.js 源码分析 - 原生模块(C++模块)的注册
ECharts图标中用的js相关的处理方法
GoJS 使用笔记
单元测试 - 测试场景记录
Node.js 源码分析 - 加载 js 文件
ES6入门
聊聊动效降级