拖放(HTML5)

开始巩固HTML的基础,然后就开始从HTML5开始学。

之所以比较重视这个拖放,是因为在找工作的时候,忘了是哪个公司了,有一个编程题涉及拖放。

一、涉及到的事件

虽然区分了拖动对象和容器盒子,但是,有的是两个都可以添加的,但是执行顺序有先后)

1.被拖动的对象

(1)ondragstart:源对象开始被拖动

(2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend:源对象被拖动结束(虽然是被拖动对象的事件,但目标对象内也可以写,但会先执行被拖动对象的)

2.目标对象(放进去的框框)

(1)ondragenter:目标对象被源对象拖动着进入(也可以写在被拖动对象内,因为被移动对象在放入其他元素内之前也是一个元素,也可以被进入)

(2)ondragover:目标对象被源对象拖动着悬停在上方

(3)ondragleave:源对象拖动着离开了目标对象

(4)ondrop:源对象拖动着在目标对象上方释放/松手

二、我的代码

1.html

2.css

3.js

三、看下效果吧

1.一开始的效果

左边的红色大盒子为box1,右边绿色大盒子为box2,黑色框为box5。

2.box3进入box4

(这里说的进入,是指鼠标的位置,以鼠标的位置为准)

移动box3,当其进入box4时,可以看到下面先输出进入4,又输出离开3。也就是先执行ondragenter,后执行ondragleave.

3.box3穿过box4,后进入box2,但未进入box5

4.在box2范围内,非box5内松手

先执行被拖动对象的ondragend。

5.移动完box3,再移动box4,从下面进入box5

6.再将box3,放回box1

 

四、总结一下

1.要给被拖动对象设置 draggable="true"

2.给ondragstart事件设置

3.给ondragover事件设置

4.给ondrop事件设置

利用setDate和getDate来做数据的传递。

然后在这个事件中让容器盒子添加新元素。

五、补充

可以看下《HTML5--拖拽API(含超经典例子)》这篇文章,这篇文章的最后有涉及将文件拖拽到网页的内容。还没实践过,但觉得不错。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值