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动效非常多,几乎页面上除了纯色背景之外全部有动效. 也正因为如此,才做成了小程序内嵌的形式(太大了). 当多次快 ...
随机推荐
- memcached单点故障与负载均衡
在上文中,主要教大家如何搭建在windows IIS 7.5下搭建php环境,使用常见的两种memcached性能监视工具.通过自己动手实践,观察监控工具上数据,相信大家对于memcached的了解 ...
- 初涉C#防止黑客攻击站短
一.同一个IP如果在一分钟内连续发送5个站短可以认为是不正确的,原因有2方面: 1.发站短的页面是有点击按钮,点击按钮后马上按钮会变为不可点击,所以在前端要防止点击一次触发多次的情况 2.发送短信的U ...
- activemq 异步和同步接收
来点实在的代码,用例子来说明: 1.异步接收,主要设置messageListener.,然后编写onmessage方法,很简单 a.客户端发送5条消息 package ch02.chat; impor ...
- poj 2104 K-th Number（主席树）
Description You are working for Macrohard company in data structures department. After failing your ...
- NOIP2011 观光公交
3．观光公交 (bus.cpp/c/pas) 风景迷人的小城 Y 市,拥有 n 个美丽的景点.由于慕名而来的游客越来越多,Y 市特 意安排了一辆观光公交车,为游客提供更便捷的交通服务.观光公交车在第 ...
- HTTP 报文总结、外送两本电子书
写在前面的话:喜欢这个比喻:如果说HTTP是因特网的信使,那么HTTP报文就是它用来搬东西的包裹. HTTP是一个应用层协议,研究它的内容的确很枯燥,没啥意思,都是规定好的,我们只需要知道是什么就好了 ...
- codeforce 603B - Moodular Arithmetic
题意:给出方程 f(kx%p)=kf(x)%p ,f:A->B,不同的映射函数f有几种,其中f,A,B值域为{0,1,2..p-1},p为素数(除了2),k为小于p的一个常数. 思路:明显是求循 ...
- 基于Hadoop 2.2.0的高可用性集群搭建步骤（64位）
内容概要: CentSO_64bit集群搭建, hadoop2.2(64位)编译,安装,配置以及测试步骤 新版亮点: 基于yarn计算框架和高可用性DFS的第一个稳定版本. 注1:官网只提供32位re ...
- POJ 3678--Katu Puzzle（2-SAT）
感觉这题比较裸,表现出了2-sat的本质. 不过构图我想的还是太简单了,a&b=1我只连了 a1->b1,b1->a1,但其实是不对的.这样连,a0和b0可以同时选到.应该连a0- ...
- hdoj 4325 Flowers【线段树+离散化】
Flowers Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Sub ...