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动效非常多,几乎页面上除了纯色背景之外全部有动效. 也正因为如此,才做成了小程序内嵌的形式(太大了). 当多次快 ...
随机推荐
- mina2
远程通信 Mina2 学习笔记 作者:李少华 邮箱:xiaosanshaoli@126.com QQ:305409913 2010-12-23 初稿 引言... 1 一． Mina ...
- Zabbix探索：工作时间的设置
默认情况下,Zabbix的工作时间是启用的. 启用后,图形的北京在工作时间内就是白底的,否则就是灰底的. 今天纠结了半天,因为无论如何都是灰底的. 后来连接到服务器上一看,靠,忘记同步时间了,所以刚好 ...
- bzoj 2244 [SDOI2011]拦截导弹（DP+CDQ分治+BIT）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2244 [题意] 给定n个二元组,求出最长不上升子序列和各颗导弹被拦截的概率. [思路] ...
- 寒假训练第九场 Brocard Point of a Triangle
题意:求布洛卡点坐标 思路:直接利用布洛卡点的性质.http://pan.baidu.com/s/1eQiP76E #include<cstdio> #include<cstring ...
- 【Hadoop代码笔记】Hadoop作业提交之TaskTracker获取Task
一.概要描述 在上上一篇博文和上一篇博文中分别描述了jobTracker和其服务(功能)模块初始化完成后,接收JobClient提交的作业,并进行初始化.本文着重描述,JobTracker如何选择作业 ...
- 关于main()和_tmain()
1.两者的共同点 int _tmain(int argc, _TCHAR* argv[]) 和 int main(int argc, char* argv[]) ,两者都是程序的主函数,两者 ...
- leetcode@ [236] Lowest Common Ancestor of a Binary Tree(Tree)
https://leetcode.com/problems/lowest-common-ancestor-of-a-binary-tree/ Given a binary tree, find the ...
- 宿舍局域网与Internet连接
写在前面的话 一般情况下,大多数组建了校园网的学校都为学生宿舍提供了连接Internet接口,所以只需要通过网线将宿舍网的集线器与校园网提供的接口进行连接即可接入Internet.宿舍网接入Inter ...
- elecworks 图框管理器
图框管理器中存储的是图纸模板(图框),新建图框的步骤如下: 1 数据库---图框管理器----新建 2 打开图框属性设置窗口,设置图框属性,设置好之后点击确定 3 右击图框图标---打开(进入图框绘制 ...
- 利用UIBezierPath实现一个带圆角的视图
- (void)drawRect:(CGRect)rect { // draw a box with rounded corners to fill the view - UIBezierPath * ...