HTML5+CSS3实现拖放(Drag and Drop)示例


Posted in HTML / CSS onJuly 07, 2014

本文简单介绍一下HTML5的拖放实现。
拖放(Drag 和 drop)是 HTML5 标准的组成部分。
浏览器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

被拖元素,dragElement :
(1)添加事件:ondragstart
(2)添加属性:dragable

放置元素,dropElement:
1、添加事件:ondargenter , ondragover , ondragleave , ondragend ,ondrop
和mouser划入划出一类的事件很类似,字面也很好理解,不赘述了,下面会用例子来说明。

2、页面上元素间的拖放
下面用个小例子,div间的拖放来展示,各个事件如何被触发:

复制代码
代码如下:
<html>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#dropEle
div
{
float: left;
}
</style>
<script src="./js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
* 拖放(Drag 和 drop)是 HTML5 标准的组成部分。
* 浏览器支持
*Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
*/
$(function ()
{
$("#dragEle")[0].ondragstart = function (event)
{
console.log("dragStart");
event.dataTransfer.setData("Text", event.target.id);
};
/**
* 当放置被拖数据时,会发生 drop 事件。
* 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
* @param event
*/
$("#dropEle")[0].ondrop = function (event)
{
/* for (var p in event.dataTransfer)
{
console.log(p + " = " + event.dataTransfer[p] + " @@");
}
*/
console.log("onDrop");
var id = event.dataTransfer.getData("Text");
$(this).append($("#" + id).clone().text($(this).find("div").length));
event.preventDefault();
};
/**
* ondragover 事件规定在何处放置被拖动的数据。
*默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
*/
$("#dropEle")[0].ondragover = function (event)
{
console.log("onDrop over");
event.preventDefault();
}
$("#dropEle")[0].ondragenter = function (event)
{
console.log("onDrop enter");
}
$("#dropEle")[0].ondragleave = function (event)
{
console.log("onDrop leave");
}
$("#dropEle")[0].ondragend = function (event)
{
console.log("onDrop end");
}
});
</script>
<div style="border: 1px solid red ; width: 100px ; height: 100px ;text-align: center;line-height: 100px;" draggable="true" id="dragEle">
</div>
<div style="width: 330px;min-height: 202px;border: 1px solid #444;margin-top: 20px;overflow-y: scroll;" id="dropEle"></div>

系统中选择的一个或多个文件拖入该div中,files中会存储拖入文件的信息,然后我们通过file可以得到文件的类型,长度,内容然后实现上传。

3、setDragImage(image, x, y)用于设置鼠标移动过程中随鼠标一起移动的效果图。必须在dragstart中设置。

4、types,effectAllowed和dropEffect分别是拖入元素的类型,拖拽过程中鼠标显示的样式,不过通常可以忽略这几个属性,一般用不到。

HTML / CSS 相关文章推荐
css3实现背景模糊的三种方式
Mar 09 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 #HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 #HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 #HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 #HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 #HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 #HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 #HTML / CSS
You might like
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
js选择器全面解析
2016/06/27 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Python中创建二维数组
2018/10/17 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
Python实现图像的垂直投影示例
2020/01/17 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
创联软件面试题笔试题
2012/10/07 面试题
污水厂厂长岗位职责
2014/01/04 职场文书
教师简历自我评价
2014/02/03 职场文书
建筑投标担保书
2014/05/20 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
高二语文教学反思
2016/02/16 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript