HTML5 | 您所在的位置:网站首页 › h5小游戏源码如何更改手机号 › HTML5 |
被拖动的源对象可以触发的事件: (1)ondragstart:源对象开始被拖动 (2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动) (3)ondragend:源对象被拖动结束 拖动源对象可以进入到上方的目标对象可以触发的事件: (1)ondragenter:目标对象被源对象拖动着进入 (2)ondragover:目标对象被源对象拖动着悬停在上方 (3)ondragleave:源对象拖动着离开了目标对象 (4)ondrop:源对象拖动着在目标对象上方释放/松手
拖拽API总共就是7个函数!! 五、如何在拖动的源对象事件和目标对象事件间传递数据
HTML5为所有的拖动相关事件提供了一个新的属性: e.dataTransfer { } //数据传递对象 功能:用于在源对象和目标对象的事件间传递数据
源对象上的事件处理中保存数据: e.dataTransfer.setData( k, v ); //k-v必须都是string类型
目标对象上的事件处理中读取数据: var v = e.dataTransfer.getData( k );
示例一:实现一个可以随着鼠标拖动而移动的小飞机 提示:飞机需要绝对定位!ondrag事件中获取鼠标的坐标值!!!
代码如下: body{ margin:0; position: relative; } img{ position:absolute; } 随着鼠标拖动而移动的小飞机![]()
示例二: 模拟电脑中 ”垃圾桶“的效果, 总共显示三个小飞机,拖动着某个小飞机到垃圾桶上方后,小飞机从DOM树上删除
提示:删除需要从DOM子节点中删除元素,需要阻止ondragover的默认行为!!利用源对象和目标对象的数据传递记录小飞机的ID值!!!
重要信息: ondragover有一个默认行为!!!那就是当ondragover触发时,ondrop会失效!!!!这个可能是浏览器的版本问题,需要以后浏览器不断更新可能才会解决!!
如何阻止? ondragover= function(e){ //源对象在悬停在目标对象上时 e.preventDefault(); //阻止默认行为,使得drop可以触发 ..... } ondrop= function(e){ //源对象松手释放在了目标对象中 ..... }
代码如下: body { text-align: center; } #trash { opacity: .2; margin: 15px; } 拖动飞机到垃圾桶后从DOM树中删除子元素![]() ![]() ![]() ![]() |
CopyRight 2018-2019 实验室设备网 版权所有 |