【重点突破】——Drag&Drop拖动与释放-白红宇

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

阅读量：4980 次

发布时间：2019-06-12

本文共 1447 字，大约阅读时间需要 4 分钟。

一、引言

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

二、七个事件

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

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

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

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

整个拖动过程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;//跳出函数，不执行}

实现：

    
                拖动的源对象可能触发的事件
   可以随着鼠标拖动而移动的飞机

效果：

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

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

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

    
             拖动的目标对象可能触发的事件

效果：

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

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

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

实现：

    
                请选择此关出征的英雄

效果：

注：转载请注明出处

转载于:https://www.cnblogs.com/ljq66/p/7624756.html

你可能感兴趣的文章