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编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 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之PHP语法学习笔记1
2006/12/17 PHP
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
python快速排序代码实例
2013/11/21 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
详解python调用cmd命令三种方法
2019/07/08 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
《李广射虎》教学反思
2014/04/27 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
python套接字socket通信
2022/04/01 Python
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript