《HTML5 开发实例大全》——1.33 实现拖曳和拖放处理
教程管理员 发布于2023-09-27 11:31 HTML教程 179
简介：
![<a href=]()
https://yqfile.alicdn.com/6e48200f4ef715b285d1d9bf8c480667dbc7aa65.png" >
本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.33节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.33 实现拖曳和拖放处理
实例说明
在HTML 5 中，可以使用如下对象和属性实现拖曳处理。
- DataTransfer 对象：拖曳对象用来传递的媒介，使用一般为Event.dataTransfer。
- draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：
<divtitle="拖曳我"draggable="true">列表1</div>
上述对象和属性支持如下鼠标事件和方法。
- ondragstart 事件：当拖曳元素开始被拖曳的时候触发的事件，此事件作用在被拖曳元素上。
- ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上。
- ondragover 事件：拖曳元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上。
- ondrop 事件：被拖曳的元素在目标元素上同时鼠标键放开触发的事件，此事件作用在目标元素上。
- ondragend 事件：当拖曳完成后触发的事件，此事件作用在被拖曳元素上。
- Event.preventDefault() 方法：阻止默认的一些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用document的ondragover事件把它直接干掉。
- Event.effectAllowed 属性：就是拖曳的效果。
本实例分别演示了鼠标光标在滑向某个位置时的不同显示样式，并且在拖动鼠标光标时也有不同的样式。
具体实现
使用Dreamweaver创建一个名为“033.html”的文件，具体代码如下所示：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aaa</title>
<style type="text/css">
body{font-size:84%;}
.dustbin{width:100px; height:260px; line-height:1.4; background-color:gray; font-size:36px; font-family:"微软雅黑", "Yahei Mono"; text-align:center; text-shadow:-1px -1px #bbb; float:left;}
.dragbox{width:500px; padding-left:20px; float:left;}
.draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-
color:#eee; cursor:move;}
.draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;}
.dragremind{padding-top:2em; clear:both;}
</style>
</head>
<body>
<div class="dustbin"><br />A<br />B<br />C</div>
<div class="dragbox">
<div class="draglist" title="AA" draggable="true">AAA1</div>
<div class="draglist" title="BB" draggable="true">AAA2</div>
<div class="draglist" title="CC" draggable="true">AAA3</div>
<div class="draglist" title="DD" draggable="true">AAA4</div>
<div class="draglist" title="EE" draggable="true">AAA5</div>
<div class="draglist" title="FF" draggable="true">AAA6</div>
</div>
<div class="dragremind"></div>
<script>
var $ = function(selector) {
/*简单的选择器方法*/
...
};
var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist"), lDrags = eleDrags.length, eleRemind = $(".dragremind")[0], eleDrag = null;
for (var i=0; i<lDrags; i+=1) {
eleDrags[i].onselectstart = function() {
return false;
};
eleDrags[i].ondragstart = function(ev) {
/*拖曳开始*/
//拖曳效果
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text", ev.target.innerHTML);
ev.dataTransfer.setDragImage(ev.target, 0, 0);
eleDrag = ev.target;
return true;
};
eleDrags[i].ondragend = function(ev) {
/*拖曳结束*/
ev.dataTransfer.clearData("text");
eleDrag = null;
return false
};
}
eleDustbin.ondragover = function(ev) {
/*拖曳元素在目标元素头上移动的时候*/
ev.preventDefault();
return true;
};
eleDustbin.ondragenter = function(ev) {
/*拖曳元素进入目标元素头上的时候*/
this.style.color = "#ffffff";
return true;
};
eleDustbin.ondrop = function(ev) {
/*拖曳元素进入目标元素头上，同时鼠标键松开的时候*/
if (eleDrag) {
eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱';
eleDrag.parentNode.removeChild(eleDrag);
}
this.style.color = "#000000";
return false;
};
</script>
</body>
</html>
执行后的效果如图1-54所示。
相关推荐
- 10-04 在HTML中取得请求中的参数
- 10-04 SharePoint 2013 母版页取消和HTML页关联
- 10-04 29行代码使用HTML5 Canvas API绘制一颗红心
- 10-04 浏览器加载和渲染html的顺序，Div和Table的区别
- 10-04 《HTML5完美游戏开发》——2.6 Processing.js实例和整合
- 10-04 如何关闭Struts2的webconsole.html
- 10-04 《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面
- 10-04 《HTML5游戏编程核心技术与实战》——2.8 小结
- 10-04 腾讯视频生成的Html代码
- 10-04 ie下tbody的innerhtml属性只读
- 控制面板
- 友情链接
- 最近发表
-
- 涂鸦而不乱简约艺术主题Office PPT免费模板背景素材下载
- 有创意的情人表白动态贺卡Office PPT免费模板背景素材下载
- 绿色简约技能竞赛电力Office PPT免费模板背景素材下载
- 极简几何商务蓝年终总结汇报Office PPT免费模板背景素材下载
- 蓝橙简约商务年终总结汇报Office PPT免费模板背景素材下载
- 绿色清新教育风课堂教学通用Office PPT免费模板背景素材下载
- 潮流复古艺术感年终总结Office PPT免费模板背景素材下载
- 浅绿商务风工作总结报告Office PPT免费模板背景素材下载
- 大气简约时尚年终总结汇报Office PPT免费模板背景素材下载
- 喜庆春节风公司年终誓师表彰大会Office PPT免费模板背景素材下载
- 最新留言
-
