h5拖放-ff的bug
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li{
list-style: none;
width: 100px;
height: 50px;
margin: 10px;
background: red;
}
#div{
width: 200px;
height: 100px;
background: blue;
margin-top: 200px;
}
</style>
<script>
onload= function () {
/* 解决ff下的bug：必须设置dataTransfer对象的setData方法才能拖拽出图片以外的标签；
1.dataTransfer对象：针对拖放新有的对象，是ev下的对象；
①setData():设置数据key和value(必须是字符串)；
②getData():获取数据，根据key值，获取对应的value；
*/
var aLi=document.getElementsByTagName('li');
var oDiv=document.getElementById('div');
for(var i =0;i<aLi.length;i++){
aLi[i].ondragstart= function (ev) {
ev=ev||event;
ev.dataTransfer.setData('name','Garven');
this.style.background='green';
}
aLi[i].ondrag= function () {
}
aLi[i].ondragend= function () {
this.style.background='red';
}
}
oDiv.ondragenter= function () {
this.style.background='red';
}
oDiv.ondragover= function (ev) {
ev=ev||event;
ev.preventDefault();
}
oDiv.ondragleave= function () {
this.style.background='blue';
}
oDiv.drop= function (ev) {
alert(ev.dataTransfar.getData('name'));
alert('helo!');
}
}
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<div id="div"></div>
</body>
</html>
h5拖放-ff的bug的更多相关文章
- h5拖放-基础知识
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- H5 拖放事件详解
拖放事件 H5的拖放事件提供了多个接口: 1.drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2.dragend:当拖动操作结束时触发(通过释放鼠标按钮或者点击转 ...
- 我拖拖拖--H5拖放API基础篇
不要搞错,本文不是讲如何拖地的.看过<javascript精粹>朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了.最近在园子见 ...
- h5拖放-拖拽购物车
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- h5拖放-上传图片预览功能
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- H5 拖放
HTML 5 拖放 HTML5 音频 HTML5 画布 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中, ...
- H5 播放视频常见bug及解决方案
本文摘自:本文来自“小时光茶社(Tech Teahouse)”公众号 原文:https://mp.weixin.qq.com/s/MM5ZwCiWLAeHalsNYMImnw 1. 自动播放问题 通过 ...
- 小程序-web-view嵌入H5页面遇到的bug
遇到的问题1:ios页面中,内容过多时有下滑真是功能,但是下滑的时候回看到底部的微信自带的灰色背景及H5的域名(ios的webview中上/下拉露出黑灰色背景问题) 解决办法:给body添加样式--- ...
- 记一次H5页面卡死的BUG
之前有次开发小程序内嵌页面,类似于网易星球那种,很多钻石可以手动点击收取. 该页面css动效非常多,几乎页面上除了纯色背景之外全部有动效. 也正因为如此,才做成了小程序内嵌的形式(太大了). 当多次快 ...
随机推荐
- javascript六难题
1.下面代码的运行效果是什么?为什么? <html> <head> <meta charset="utf-8"> <title>DO ...
- [Tommas] 测试用例覆盖率（一）
一.测试用例的切面设计 所谓测试切面设计,其实就是测试用例大项的划分.测试用例划分的经典方法是瀑布模型,也就是从上到下,逐渐细分,大模块包括小模块,小模块包括更小的模块.但仅仅如此是不够的,我们还要从 ...
- Leetcode OJ : Repeated DNA Sequences hash python solution
Total Accepted: 3790 Total Submissions: 21072 All DNA is composed of a series of nucleotides abb ...
- V&View更新
这几天一直在做V&View的更新工作,这次的更新是质的变化,表面界面变化不大,可是内部确有着翻天覆地的改变. 这几天我主要做了一下几件事: 1. 重新构思了vview的文章发布形式,之前使用k ...
- AVD Snapshot功能
写程序的时候,经常会碰到:The application has stopped unexpectly… 有时候,会想对原来软件增加新功能或者修改bug.在eclipse修改后保存代码(注意,要保存所 ...
- 家庭局域网接入Internet
接入Internet 建立宽带连接 步骤一:单击"网络",再属性 步骤二:单击"更改适配器设置" 步骤三:选择"宽带连接" 步骤四:输入 ...
- Oracle中的AS和IS
Oracle中的AS和IS是ORACLE为了方便而设置的同义词基本上没有不同 . 使用规则: 1.在创建存储过程(PROCEDURE)/函数(FUNCTION),以及自定义类型(TPYE)和包(PAC ...
- 剑指OFFER之栈的压入、弹出序列（九度OJ1366）
题目描述: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈 ...
- java基础三种循环的使用及区别
摘要:Java新人初学时自己的一些理解,大神们路过勿喷,有什么说的不对不足的地方希望能给予指点指点,如果觉得可以的话,希望可以点一个赞,嘿嘿,在这里先谢了.在这里我主要说的是初学时用到的Java三个循 ...
- iOS sharedSDK详解
1,系统自带的分享 -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ if (! ...