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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
html form表单基础入门案例讲解
Jul 21 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中json_encode中文编码问题分析
2011/09/13 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
JS取文本框中最小值的简单实例
2013/11/29 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
Python中input与raw_input 之间的比较
2017/08/20 Python
python生成圆形图片的方法
2020/03/25 Python
Python3中详解fabfile的编写
2018/06/24 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
详解Django CAS 解决方案
2019/10/30 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
开办饭店创业计划书
2013/12/28 职场文书
诚信考试倡议书
2014/04/15 职场文书
高考励志标语
2014/06/05 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
python基础之文件处理知识总结
2021/05/23 Python
Python3 类型标注支持操作
2021/06/02 Python
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript