HTML5中实现拖放效果无须借助javascript


Posted in HTML / CSS onDecember 26, 2012

在Web开发中,我们要实现拖放效果,需要借助Javascript。今天让我们使用Html5实现它:
先看html核心代码:

复制代码
代码如下:

<div>
<p>把黄色小方块拖入到红色大方框中</p>
</div>
<div id="item" draggable="true">
</div>
<div id="drop">
</div>

draggable属性是html5新增加的,它有三个值true,false,auto. true是可以拖,false是不可以,auto由用户浏览器是否支持而定。更多请可以参考官方文档.
加上一点儿样式:
复制代码
代码如下:

<style type="text/css">
#drop
{
width: 300px;
height: 200px;
background-color: #ff0000;
padding: 5px;
border: 2px solid #000000;
}
#item
{
width: 100px;
height: 100px;
background-color: #ffff00;
padding: 5px;
margin: 20px;
border: 1px dashed #000000;
}
*[draggable=true] {
-moz-user-select:none;
-khtml-user-drag: element;
cursor: move;
}
*:-khtml-drag {
background-color: rgba(238,238,238, 0.5);
}
</style>

然后我们来看javascript:
复制代码
代码如下:

function listenEvent(eventTarget, eventType, eventHandler) {
if (eventTarget.addEventListener) {
eventTarget.addEventListener(eventType, eventHandler,false);
} else if (eventTarget.attachEvent) {
eventType = "on" + eventType;
eventTarget.attachEvent(eventType, eventHandler);
} else {
eventTarget["on" + eventType] = eventHandler;
}
}
// cancel event
function cancelEvent (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
// cancel propagation
function cancelPropagation (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
window.onload=function() {
var target = document.getElementById("drop");
listenEvent(target,"dragenter",cancelEvent);
listenEvent(target,"dragover", dragOver);
listenEvent(target,"drop",function (evt) {
cancelPropagation(evt);
evt = evt || window.event;
evt.dataTransfer.dropEffect = 'copy';
var id = evt.dataTransfer.getData("Text");
target.appendChild(document.getElementById(id));
});
var item = document.getElementById("item");
item.setAttribute("draggable", "true");
listenEvent(item,"dragstart", function(evt) {
evt = evt || window.event;
evt.dataTransfer.effectAllowed = 'copy';
evt.dataTransfer.setData("Text",item.id);
});
};
function dragOver(evt) {
if (evt.preventDefault) evt.preventDefault();
evt = evt || window.event;
evt.dataTransfer.dropEffect = 'copy';
return false;
}

由上面的代码我们看使用一组HTML5 提供的拖放Events,直接来看下面:
dragstart
Drag event starts.
drag
During the drag operation.
dragenter
Drag is over the target; used to determine if target will accept drop.
dragover
Drag is over target; used to determine feedback to user.
drop
Drop occurs.
dragleave
Drag leaves target.
dragend
Drag operation ends.
定义了相关的事件,来实现想要功能。上面的Js不难看懂。
你可以自己试一下,目前在Opera支持最好,IE效果并不好。
希望对您Web开发有帮助.
HTML / CSS 相关文章推荐
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
css3 中实现炫酷的loading效果
Apr 26 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 #HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 #HTML / CSS
You might like
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
php查询内存信息操作示例
2019/05/09 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
自我鉴定范文300字
2013/10/01 职场文书
大四自我鉴定
2014/02/08 职场文书
员工薪酬激励方案
2014/06/13 职场文书
欢迎领导检查标语
2014/06/27 职场文书
重阳节标语大全
2014/10/07 职场文书
2015年班干部工作总结
2015/04/29 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python