禁止浏览器上下拖拽方法

在触屏写的一些弹层总会引发不同浏览器里面的bug。

比如下图左侧窗口出现的时候,用户在拖拽右侧的body区域就会在某些浏览器里引发一些bug。

索性干掉这个方法,在弹层显示时不让用户拖拽页面。

引用的方法

//body一屏显示禁止上下拖拽

setPreventDefault.start();

//取消事件

setPreventDefault.end();

 1 /*禁止浏览器滚动*/
 2 var setPreventDefault = {
 3     oldScrollTop : 0,/*记录滚动条位置*/
 4     docEle = document.documentElement,
 5     /*开始*/
 6     start:function(){
 7         this.oldScrollTop = this.docEle.scrollTop || document.body.scrollTop;
 8         /*
 9         需要在css里添加样式
10         .setPreventDefault,.setPreventDefault body{height:100%;width:100%; position:absolute;top:0;left:0;overflow:hidden}
11         */
12         this.docEle.className = ‘setPreventDefault‘;
13     },
14     /*结束*/
15     end:function(){
16          this.docEle.className = ‘‘;
17         window.scrollTo(0,this.oldScrollTop);
18     }
19 }
时间: 2024-10-12 15:46:41

禁止浏览器上下拖拽方法的相关文章

Duilib嵌入CEF禁止浏览器响应拖拽事件

在开发中有一个需求,拖拽外部文件到客户端,然后客户端响应WM_DROPFILES消息,在拖拽消息里处理一下业务,最后把处理结果显示到客户区html中,但实际中发现当拖拽文件到客户区,浏览器首先处理了拖拽事件,外层的Win32窗口无法捕捉到拖拽消息,因此要想实现此操作,刚开始我想了一个本办法,在客户区最外层罩了一个透明的Win32原生窗口,这样拖拽文件时,在最外层透明窗口的WM_DROPFILES消息中处理具体业务,最后用C++调用js函数,在页面显示处理结果. 方法一: 透明窗口 Layered

关于处理禁止图片默认拖拽行为动作

这样子我鼠标移动的时候,没有触发onmousemove事件绑定的函数.操作起来很别扭..后来自己整理了一下..一共有三个办法可以解决这个问题..具体哪个办法更优,现在还不清楚.以后有能力判断优劣的时候再判断吧 1.document.images[i].ondragstart=function (){return false;}; 直接循环页面所有的img标签..然后把它的ondragstart事件return false:这样子就禁止了浏览器图片的默认拖拽动作了.感觉这里要遍历所有IMG标签..

纯JS打造比QQ空间更强大的图片浏览器-支持拖拽、缩放、过滤、缩略图等

在线演示地址(打开网页后,点击商家图册): http://www.sport7.cn/cc/jiangnan/football5.html 先看一看效果图: 该图片浏览器实现的功能如下: 1. 鼠标滚轮缩放图片: 2. 鼠标拖动图片: 3. 点击放大/缩小图标可以切换为原始大小和最佳只存模式: 4. 点击左右箭头可以进行翻页: 5. 点击缩略图显示大图: 6. 缩略图支持左右箭头分页,自动分页到选中的图片: 7. 右侧图片过滤: 8. 按ESC键自动退出图片浏览器. 想知道怎么实现的?那的先看看

禁止在当前页拖拽内容打开,禁止拖拽图片在新窗口打开-解决办法。

document.ondragover = function (e) { e.preventDefault(); }; document.ondrop = function (e) { e.preventDefault(); }; $(document).on("dragstart", function (e) { return false; });

解决火狐浏览器拖拽打开新窗口的问题

火狐浏览器实现拖拽有2个坑: 1.在dragstart事件中,必须要使用ev.dataTransfer.setData(),否则,即使在html中设置了元素 draggable=true,拖拽也是无效的. dragstart: function (ev) { ev.dataTransfer = ev.originalEvent.dataTransfer; var domId = ev.target.id; ev.dataTransfer.setData("domId",domId);

第一百三十五节,JavaScript,封装库--拖拽

JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽,如:cursor: move; * 无参 **/ feng_zhuang_ku.prototype.tuo_zhuai = function () { if (this.jie_dian.length == 1) { var yan_su = null; for (var i = 0; i < th

HTML5开发 拖拽文件上传

Drag&Drop 拖拽功能的处理 关于HTML5拖拽文件上传,其实国外已经有很多网站有这样的应用,最早推出拖拽上传应用的是 Gmail,它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送,但其实现在利用HTML5的功能实现,主要借助于新版支持的浏览器来实现,IE还是弱很多. 拖拽上传应用主要使用了以下 HTML5技术: Drag&Drop : HTML5基于拖拽的事件机制.File API : 可以很方便的让 Web 应用访问文件对象,File API 包括FileList.Bl

HTML页面居中弹出自定义窗口层(实现可拖拽)

使用DIV弹出窗口来动态显示内容的原理:首先采用CSS和HTML隐藏弹窗中的内容,然后利用JavaScript(本教程中是JQuery)来动态显示它们.这种效果不仅能够充分利用有限的版面空间,而且能够提高用户体验:更重要的是,它并不影响SEO效果(因为它实际存在于页面中,只是初始为不可见状态) 1.在html页面中定义一个div,并在div实现我们需要展示的内容. <body> <div id="login"> <h2><img src=&qu

简单弹窗拖拽

<!doctype html><!--<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范.--><html>    <head>        <!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),utf-8国际编码-->        <meta http-equiv="Content-