正文

【重点突破】——Drag&Drop拖动与释放

IP云
IP云V管理员/1 阅读
10/02
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

一、引言

在学习HTML5新特性的时候，学到了Drag&Drop这两种拖放API，这里根据拖动的是“源对象”还是“目标对象”做两个小练习，主要是为了理解与应用HTML5为拖放行为提供的7个事件。

二、七个事件

HTML5为拖放行为提供了7个事件，分为两组：

拖动的源对象（会动）可以触发的事件：

  • dragstart:拖动开始
  • drag:拖动中
  • dragend:拖动结束

整个拖动过程：dragstart*1+drag*n+dragend*1

拖动的目标对象（不会动）可以触发的事件：

  • dragenter：拖动着进入
  • dragover：拖动着悬停在上方
  • dragleave：拖动着离开
  • drop: 在目标上方释放

整个拖动过程1：dragenter*1+dragover*n+dragleave*1

整个拖动过程2：dragenter*1+dragover*n+drop*1

三、可以随鼠标拖动而移动的小飞机

要求：使用拖动源对象提供的事件句柄。

小知识点：拖动事件是要求获得相对于整个页面的左上角的偏移量，使用e.pageX/pageY。（e.pageX与e.offsetX的区别：e.offsetX是相对于事件源左上角的偏移量）

问题1：h1有margin-top，会把body挤下来

解决方法：给body设置前置内容给元素，空格元素设为body的第一个子元素。这样即使h1有margin-top，也不会把body挤下来

body:before{
content:' ';
display:table;
}

问题2：浏览器默认拖动的源对象触发结束，自动定位位置到(0,0)点处

解决方法：当ex，ey都等于0的时候，跳出函数，不执行

if(ex===0 && ey===0){
return;//跳出函数，不执行
}

实现：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
position:relative;
margin:0;
}
body:before{
content:' ';
display:table;
}
#p3{
position:absolute;
}
</style>
</head>
<body>
<h1>拖动的源对象可能触发的事件</h1>
<h3>可以随着鼠标拖动而移动的飞机</h3>
<img id="p3" src="data:image/p3.png">
<script>
//刚拖动时鼠标在飞机上的偏移量
var startX = 0;
var startY = 0; //源对象刚开始拖动
p3.ondragstart = function(e){
startX = e.offsetX;//拖动事件相对于飞机上的偏移量
startY = e.offsetY;
} //源对象拖动中
p3.ondrag = function(e){
//获得拖动事件相对于页面的偏移量
var ex = e.pageX;
var ey = e.pageY; if(ex===0 && ey===0){
return;//防止拖动事件最后触发的(0,0)坐标
} //修改元素位置
p3.style.left = (ex-startX)+'px';
p3.style.top = (ey-startY)+'px'; } //源对象拖动结束
p3.ondragend = function(e){
console.log('drag end...')
}
</script>
</body>
</html>

效果：

四、模拟垃圾箱拖动删除效果

要求：使用拖动事件的源对象和目标对象可能触发的7个事件。

思路：在刚开始拖动时（src.ondragstart）记录被拖动的源对象的ID，释放时（target.ondrop）根据此ID找到源对象，执行删除：div.removeChild(c)。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
text-align: center;
}
#box{
border-top:1px solid #aaa;
padding:1em;
}
</style>
</head>
<body>
<h1>拖动的目标对象可能触发的事件</h1>
<img id="trash" src="data:image/trash.png">
<div id="box">
<img id="p1" src="data:image/p1.png">
<img id="p2" src="data:image/p4.png">
<img id="p3" src="data:image/p3.png">
</div><script>
var planeId = null;//当前被拖动的飞机的id //拖动事件的源对象可能触发的事件
var list = document.querySelectorAll('#box img');
for(var i= 0;i<list.length;i++){
var plane = list[i];
plane.ondragstart = function(e){
planeId = this.id;//记录被拖放的飞机的id
};
plane.ondrag = function(e){};
plane.ondragend = function(e){}
} //拖动事件的目标对象可能触发的事件
trash.ondragenter = function(e){};
trash.ondragover = function(e){
e.preventDefault();
};
trash.ondragleave = function(e){};
trash.ondrop = function(e){
//根据元素的ID查找IMG元素，在#box进行删除
var img = document.getElementById(planeId);
box.removeChild(img);
}</script>
</body>
</html>

效果：

五、选择飞机英雄到问号飞机处覆盖可放回

要求：在问号飞机的下方，选择任意一个飞机英雄，拖拽到问号飞机处，替代问号飞机，问号飞机隐藏；再选择另一飞机英雄后，前一飞机退回飞机列表中；如果直接把问号处飞机拖拽到飞机列表，也可以实现放回操作，此时，问号飞机重新显示。

小坑：DOM树中空格，换行都是节点树，要实现把问号飞机p0后的兄弟飞机放回，应该选用元素树，元素兄弟p0.nextElementSibling

实现：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
text-align: center;
}
#chosen{
border:1px solid #aaa;
width: 210px;
min-height:110px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>请选择此关出征的英雄</h3>
<div id="chosen">
<img src="data:image/p0.png" id="p0">
</div>
<hr/>
<div id="list">
<img src="data:image/p1.png" id="p1">
<img src="data:image/p4.png" id="p2">
<img src="data:image/p3.png" id="p3">
</div> <script>
/***分析1：
* 拖动源对象：#list>img
* 拖动目标对象：#chosen
* **/
var draggedPlaneId = '';//定义全局变量，用来保存被拖动的飞机ID var planeList = document.querySelectorAll('#list img');
for(var i=0;i<planeList.length;i++){
var p = planeList[i];
p.ondragstart = function(e){
draggedPlaneId = this.id;//在全局记录被拖动的飞机的ID
};
p.ondrag = function(e){};
p.ondragend = function(e){}
} chosen.ondragenter = function(e){};
chosen.ondragover = function(e){
e.preventDefault();
};
chosen.ondragleave = function(e){};
chosen.ondrop = function(e){ //隐藏问号飞机
p0.style.display='none'; //根据之前保存的被拖动的飞机ID，查找对应的IMG元素
var p = document.getElementById(draggedPlaneId); //选中DIV把列表中的飞机追加为自己的孩子，列表中不再有此元素
chosen.appendChild(p); //若此时#chosen子元素数量已经为3个，必须p0后的那个重新移回去
if(chosen.children.length>=3){
list.appendChild(p0.nextElementSibling);
}
//坑：DOM树中空格，换行都是节点树，应该用元素树，元素兄弟
}; /***分析2：
* 拖动源对象：#chosen>img
* 拖动目标对象：#list
* **/
list.ondragenter = function(e){};
list.ondragover = function(e){
e.preventDefault();
};
list.ondragleave = function(e){};
list.ondrop = function(e){
if(draggedPlaneId !== 'p0'){
//把拖动的非p0移动到#list
var p = document.getElementById(draggedPlaneId);
list.appendChild(p);
//显示出p0
p0.style.display = 'block';
}
};
</script>
</body>
</html>

效果：

注：转载请注明出处

【重点突破】——Drag&Drop拖动与释放的更多相关文章

  1. UWP&sol;Win10新特性系列—Drag&amp&semi;Drop 拖动打开文件

    在Win10 App开发中,微软新增了系统PC文件与UWP 之间的文件拖拽行为,它支持将系统磁盘上的文件以拖拽的形式拖入App中并处理,在前不久的微软build 2015开发者大会上微软展示的UWP版 ...

  2. Win10&sol;UWP新特性—Drag&amp&semi;Drop 拖出元素到其他App

    在以前的文章中,写过微软新特性Drag&Drop,当时可能由于处于Win10预览版,使用的VS也是预览版,只实现了从桌面拖拽文件到UWP App中,没能实现从UWP拖拽元素到Desktop A ...

  3. HTML5魔法堂：全面理解Drag &amp&semi; Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

  4. Android -- Drag&amp&semi;&amp&semi;Drop

    Android3.0提供了drag/drop框架,利用此框架可以实现使用拖放手势将一个view拖放到当前布局中的另外一个view中. 实现拖放的步骤 首先,我们先了解一下拖放过程,从官方文档可以知道, ...

  5. Android开发之Drag&amp&semi;Drop框架实现拖放手势

    Android3.0提供了drag/drop框架,利用此框架可以实现使用拖放手势将一个view拖放到当前布局中的另外一个view中.本文将介绍如何使用拖放框架. 一.实现拖放的步骤 首先,我们先了解一 ...

  6. HTML 学习笔记 （drag &amp&semi; drop）

    拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseo ...

  7. JS魔法堂：IE5~9的Drag&amp&semi;Drop API

    一.前言     < HTML5魔法堂:全面理解Drag & Drop API>中提到从IE5开始已经支持DnD API,但IE5~9与HTML5的API有所不同,下面我们来了解一 ...

  8. 重新想象 Windows 8 Store Apps &lpar;49&rpar; - 输入&colon; 获取输入设备信息&comma; 虚拟键盘&comma; Tab 导航&comma; Pointer&comma; Tap&comma; Drag&comma; Drop

    [源码下载] 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 作者:weba ...

  9. &lbrack;转&rsqb;人人网首页拖拽上传详解&lpar;HTML5 Drag&amp&semi;Drop、FileReader API、formdata&rpar;

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

随机推荐

  1. 无域环境下，VCENTER5&period;5 更改IP后 无法登陆异常修复

    转自http://bbs.vmsky.com/forum.php?mod=viewthread&tid=45593&highlight=vcenter%2Bip 由于没有域环境,SSO ...

  2. ehcache整合spring本地接口方式

    一.简介 ehcache整合spring,可以通过使用echache的本地接口,从而达到定制的目的.在方法中根据业务逻辑进行判断,从缓存中获取数据或将数据保存到缓存.这样让程序变得更加灵活. 本例子使 ...

  3. mongodb 操作语句与sql操作语句对比

    上行:SQL 操作语句 下行:Mongo 操作语句 CREATE TABLE USERS (a Number, b Number) db.createCollection("mycoll&q ...

  4. TIOBE：全球编程语言最新排名（Kotlin排名进入前50名）

    作为coder,大家当然关心自己所使用语言的应用趋势.要是几年后所用语言变得默默无闻,那岂不是之前的知识储备与经验积累都会大打折扣.TIOBE排行榜是根据互联网上有经验的程序员.课程和第三方厂商的数量 ...

  5. &lbrack;译&rsqb; OpenStack Pike 版本中的 53 个新功能盘点

      原文:https://www.mirantis.com/blog/53-things-to-look-for-in-openstack-pike/ 作者:Mirantis Nick Chase 发 ...

  6. 使用免费 mongodb数据库 &plus; 免费node&period;js服务器搭建小程序接口

    由于微信的小程序只支持不带端口的域名接口,不支持IP地址和接口,所以我们需要映射到80端口并绑定备案过的域名才能被微信小程序访问到.简单点就是接口需要 https 协议才行,找了许久的免费的数据库与n ...

  7. oracle什么时候须要commit

    今天在oracle的SQL plus 中运行了删除和查询操作,然后在PL/SQL中也运行查询操作,语句一样,结果却不一样,让我大感郁闷,后来才突然想到可能是两边数据不一致造成的,可是为什么不一致呢,就 ...

  8. 机器学习之路： python 朴素贝叶斯分类器 MultinomialNB 预测新闻类别

    使用python3 学习朴素贝叶斯分类api 设计到字符串提取特征向量 欢迎来到我的git下载源代码: https://github.com/linyi0604/MachineLearning fro ...

  9. 【Linux学习】python脚本直接运行与nohup运行结果不同

    之前遇到问题,在云主机上运行python脚本直接运行与nohup运行结果不同,甚至nohup根本运行不出来. 后来参考下别人的博客,终于知道问题了. nohup 使用的python版本问题. 而且no ...

  10. Vue2&period;X的路由管理记录之 钩子函数（切割流水线）2

    $route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生 ...