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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
HTML中的表格元素介绍
Feb 28 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
十天学会php之第三天
2006/10/09 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
Vue.js的模板语法详解
2020/02/16 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
顶岗实习接收函
2014/01/09 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
信访维稳工作汇报
2014/10/27 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
百年孤独读书笔记
2015/06/29 职场文书
2016年记者节感言
2015/12/08 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS