html5拖曳操作 HTML5实现网页元素的拖放操作


Posted in HTML / CSS onJanuary 02, 2013

HTML5之前,要实现网页元素的拖放操作,需要依靠mousedown、mousemove、mouseup等API,通过大量的JS代码来实现;HTML5中引入了直接支持拖放操作的API,大大简化了网页元素的拖放操作编程难度,并且这些API除了支持浏览器内部元素的拖放外,同时支持浏览器和其它应用程序之间的数据互相拖动。

本文通过一个简单示例,演示HTML5中拖放API的使用方法。

场景:

如下图所示,我们要实现:

通过拖放将照片从左侧“相册”区域拖拽到右侧“垃圾箱”区域;拖拽过程中,“温馨提示”部分要及时提醒,当前正在进行拖放操作;

html5拖曳操作 HTML5实现网页元素的拖放操作

实现方法:

如上界面的HTML代码比较简单,如下:

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>HTML5实现拖拽操作</title>
<meta charset="utf-8"/>
<style>
.album
{
border: 3px dashed #ccc;
float: left;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 220px;
}
</style>
</head>
<body">
<div id="info">
<h2>温馨提示:可将照片直接拖到垃圾箱中</h2>
</div>
<div id="album" class="album">
<h2>相册</h2>
<img draggable="true" id="img1" src="img/bg_01.png" />
<img draggable="true" id="img2" src="img/bg_02.png" />
<img draggable="true" id="img3" src="img/bg_03.png" />
</div>
<div id="trash" class="album">
<h2>垃圾箱</h2>
</div>
<br/>
</body>
</html>

注意:如果要实现拖放操作,需要在待拖放的元素上增加draggable="true"属性;

接下来,再在onload事件中增加如下JS代码即可,注释比较详尽,就不再单独解释。

复制代码
代码如下:

<script>
function init(){
var info = document.getElementById("info");
//获得被拖放的元素,本示例为相册所在的DIV
var src = document.getElementById("album");
//开始拖放操作
src.ondragstart = function (e) {
//获得被拖放的照片ID
var dragImgId = e.target.id;
//获得被拖动元素
var dragImg = document.getElementById(dragImgId);
//拖放操作结束
dragImg.ondragend = function(e){
//恢复提醒信息
info.innerHTML="<h2>温馨提示:可将照片直接拖到垃圾箱中</h2>";
};
e.dataTransfer.setData("text",dragImgId);
};
//拖放过程中
src.ondrag = function(e){
info.innerHTML="<h2>--照片正在被拖动--</h2>";
}
//获得拖放的目标元素
var target = document.getElementById("trash");
//关闭默认处理;
target.ondragenter = function(e){
e.preventDefault();
}
target.ondragover = function(e){
e.preventDefault();
}
//有东西拖放到了目标元素
target.ondrop = function (e) {
var draggedID = e.dataTransfer.getData("text");
//获取相册中的DOM对象
var oldElem = document.getElementById(draggedID);
//从相册DIV中删除该照片的节点
oldElem.parentNode.removeChild(oldElem);
//将被拖动的照片DOM节点添加到垃圾桶DIV中;
target.appendChild(oldElem);
info.innerHTML="<h2>温馨提示:可将照片直接拖到垃圾箱中</h2>";
e.preventDefault();
}
}
</script>

实现效果:

html5拖曳操作 HTML5实现网页元素的拖放操作html5拖曳操作 HTML5实现网页元素的拖放操作

HTML / CSS 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 #HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 #HTML / CSS
html5 application cache遇到的严重问题
Dec 26 #HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 #HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 #HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 #HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 #HTML / CSS
You might like
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
Python3读取zip文件信息的方法
2015/05/22 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
python 内置函数汇总详解
2019/09/16 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
最小二乘法及其python实现详解
2020/02/24 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
华为的Java面试题
2014/03/07 面试题
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
美德好少年主要事迹
2014/01/29 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
办公用房租赁协议书
2014/11/29 职场文书