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动效非常多,几乎页面上除了纯色背景之外全部有动效. 也正因为如此,才做成了小程序内嵌的形式(太大了). 当多次快 ...
随机推荐
- 转换时间为 “XX分钟之前”
public static string getTimeAgo(string strDate) { string strTime = string.Empty; if (clsCommon.IsDat ...
- python引用在函数传参时的体现以及可变与不可变对象的对比
今天偶然看到 vamei 老师的博客 http://www.cnblogs.com/vamei/archive/2012/07/10/2582795.html 讲的是python动态类型以及引用的事儿 ...
- 【转】vnc centos
原文:http://www.cnblogs.com/niocai/archive/2011/11/02/2233332.html 我的CentOS版本是6.0,下述方法在i386和x86_64中均适用 ...
- puppet学习：类与类的依赖关系的问题
今天在部署Zabbix的Proxy时,在负责安装的Exec中去掉了一些无关的Package的依赖,结果,就出现了依赖关系的问题. 在zabbix::install中,我写的是require mysql ...
- 了解 MVC 应用程序执行过程
发送给基于 ASP.NET MVC 的 Web 应用程序的请求首先通过 UrlRoutingModule 对象(一个 HTTP 模块)进行传递. 此模块将分析请求并执行路由选择. UrlRouting ...
- activemq 的小实验
package ch02.chat; import javax.jms.Connection; import javax.jms.ConnectionFactory; import javax.jms ...
- HW5.34
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- POJ3922 A simple stone game
网上有很多解题报告,我的理解就是可以用类似数学归纳的方法证明,就是取一个数,让对手进入必败态. 详细见论文.
- 【bzoj1300】大数计算器
题意: 求C(n,m) 如果C(n,m)的位数<=12 那么直接输出 否则按XXX...XXXXXXXXX的形式输出 题解: 这题之前打过 但是昨天又想出一种新的做法 先说下新的做法吧- - _ ...
- ffmpeg编码YUV420视频序列
依旧是这里的测试序列 http://www.cnblogs.com/zzugyl/p/3678865.html测试了JM和libx264的编解码质量后来用ffmpeg转码 发现忘记了命令行转码的命令网 ...