Html5 Drag 使用问题
来源:互联网 发布:cnpm 安装node sass 编辑:程序博客网 时间:2024/06/05 17:16
关于Html5 Drag使用时遇到的兼容性和使用可能产生分歧的问题
1. dataTransfer.setData()只能用在dragstart 事件中,在webkit 和ie的浏览器下 dataTransfer.getData()只能用在drop事件中,其他任何事件使用时,得到的都是空值。
2.当dragstart事件触发的回调中,如果改变了drag对象所在的盒模型中的zindex层级,使得drag对象被压到某个对象下面,或者drag对象display:none,都会立刻触发dragend事件(除firefox浏览器),导致这个拖拽行为终止。
$('dragobject').on('dragstrat',function(e){//以下会触发dragend事件,同理加带有类似css的classname也会 $(this).hide();$(this).css('z-index',-1); //透明则不会触发$(this).css('opacity', 0);});如果非要处理类似的效果,可以用setTimeout来延后,就没有这个问题了。
$('dragobject').on('dragstrat',function(e){var $this = $(this); setTimeout(function(){ $(this).hide(); $(this).css('z-index',-1); },0);});
3.dataTransfer.setDragImage(), 给拖拽添加一个随鼠标移动的ghost image,ie10, ie11不支持, 会显示默认的效果,要去掉这个效果的方法就是把目标设置为display:none
4.如果两个div紧挨着相邻,拖拽元素后在两者之间来回晃动,会触发dragenter 和dragleave事件,但是触发顺序是先触发进入下一个元素的dragenter事件,再出触发移出前一个元素的dragleave事件。
5.拖拽滚动,拖动一个物体到窗口边缘,滚动条会随着滚动, firefox不支持,只有window边缘或者iframe边缘才会触发这个特效,也可以自己使用dragover事件模拟。
代码可以参考drag_to_scroll_reloaded-0.5-fx.xpi插件,减压后看dragtoscrolloverlay.xul文件
6.触发dragstart事件后,任何mouse事件将被禁用。
0 0
- Html5 Drag 使用问题
- 使用HTML5的drag&drop做一个数独游戏
- 使用HTML5的drag&drop做一个数独游戏
- HTML5 drag的使用案例 --- 类似于图片墙
- html5 Drag and drop
- HTML5----拖放drag,drop
- HTML5 Drag and Drop
- HTML5之drag
- html5 Drag and Drop
- HTML5 drag drop
- html5 File Drag-and-Drop
- HTML5 拖放(Drag和drop)
- HTML5 拖放(Drag和drop)
- HTML5中drag拖放功能
- html5 原生 drag drop helloworld
- HTML5拖拽功能drag
- HTML5 drawImage 使用问题
- HTML5 drawImage 使用问题
- 在xcode5中修改整个项目名
- Android动画解析--XML
- 昆仑叶哲华:品牌战略定位需要考虑的因素
- bash_profile
- 《Hibernate In Action (2007)》(中/英)(pdf)计算机电子书下载
- Html5 Drag 使用问题
- 《Eclipse从入门到精通》(pdf)计算机电子书下载
- 由于未能创建 Microsoft Visual C# 2008 编译器,因此未能打开项目 "xxx"
- php cookie session的使用
- 希尔排序
- mysql 字符集处理
- Excel
- Oracle字符集的查询和修改
- NSUserDefault的plist文件的位置