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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
玩转CSS3色彩
Jan 16 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 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 字符串替换的方法
2012/01/10 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
让 python 命令行也可以自动补全
2014/11/30 Python
详解Python中类的定义与使用
2017/04/11 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
python实现猜数字小游戏
2020/03/24 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
Keras 使用 Lambda层详解
2020/06/10 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
求职自荐信范文格式
2013/11/29 职场文书
《开国大典》教学反思
2014/04/19 职场文书
取保候审保证书
2014/04/30 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
安全生产专项整治方案
2014/05/06 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书