IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
最近有个需求须要实现左右拖拽功能,页面右边是个iframe页面,在chrome测试通过之后,发现在ie8上面效果不是很理想,最后查找资料得知可以使用ie自带的setCapture和releaseCapture来解决。
sideDragBar.on('mousedown.sideMenu', function(e){ this.setCapture && this.setCapture();// ie下可以使用setCapture来解决object拖拽问题 startDragging(e); }); function removeDocumentListeners(e){ this.releaseCapture && this.releaseCapture(); // ie下可以使用setCapture来解决object拖拽问题 doc.off('mousemove.sideMenu'); doc.off('selectstart.sideMenu'); doc.off('mouseup.sideMenu'); }
以上所述是小编给大家介绍的IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
JS高级拖动技术 setCapture,releaseCapture
复制代码 代码如下: <script type="text/javascript"> <!-- window.onload=function(){ objDiv = document.getElementById('drag'); drag(objDiv); }; function drag(dv){ dv.onmousedown=function(e){ var d=document; e = e || window.event; var x= e.layerX |
-
HTML中的setCapture和releaseCapture使用介绍
另外,还有一个很重 要的事情是,在Win32上,mouse move的事件不是一个连续的,也就是说,并不是我们每次移动1px的鼠标指针,就会发生一个mousemove,windows会周期性检查mouse 的位置变化来产生mousemove的事件. 所以,如果是一个很小的页面对象,比如一个直径5px的圆点,如果没有setCapture和 releaseCapture,那么在鼠标按住之后,快速的移动鼠标,就有可能鼠标移动走了,但是小圆点还在原地,就是因为下一次的mousemove事 件已经不再发给
-
HTML中setCapture、releaseCapture 使用方法浅析
1. setCapture 简介 setCapture可以将鼠标事件锁定在指定的元素上,当元素捕获了鼠标事件后,该事件只能作用在当前元素上. 以下情况会导致事件锁定失败: 当窗口失去焦点时,锁定的事件,自动就会取消. alert也会导致事件的锁定取消.解决办法是在alert之后再次锁定. 鼠标右键也会导致事件解锁. setCapture只可以作用于以下事件: onclick ondblclick onmousedown onmouseup onmouseover onmouseout setCa
-
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
最近有个需求须要实现左右拖拽功能,页面右边是个iframe页面,在chrome测试通过之后,发现在ie8上面效果不是很理想,最后查找资料得知可以使用ie自带的setCapture和releaseCapture来解决. sideDragBar.on('mousedown.sideMenu', function(e){ this.setCapture && this.setCapture();// ie下可以使用setCapture来解决object拖拽问题 startDragging(e);
-
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Vue-draggable 的github传送门 : https://github.com/SortableJS/Vue.Draggable 一. 下载依赖包:npm install vuedraggable -S 二. 在需要使用的当前界面引入依赖,注册组件: import draggable from "vuedraggable"; export default { components: { draggable, } 三. 在template 中建立表格,分别写出thead 部
-
yii2利用自带UploadedFile实现上传图片的示例
本人搜索了很多关于yii2利用自带UploadedFile实现上传图片介绍,下面我来记录一下. 创建一个 models/UploadForm.php: namespace app\models; use yii\base\Model; use yii\web\UploadedFile; /** * UploadForm is the model behind the upload form. */ class UploadForm extends Model { /** * @var Uploa
-
IDEA利用自带Axis工具和wsdl文件反向生成服务端客户端代码详细流程
推荐教程 idea2021以下最新安装j ihuo 教程 https://www.jb51.net/article/184631.htm https://www.jb51.net/article/178193.htm 正文 IDEA,我使用的是最新版本(2021.1.1) JDK1.8 tomcat-8 详细步骤,用图片代替,关键地方,字幕解释. 到此步骤,是关键重点,请认真看 鼠标右键选择项目(soap-demo)然后请看图片 当改完之后,项目结构,会发生改变 创建-服务端-生成代码 1.请提
-
利用JavaScript实现拖拽改变元素大小
大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当点击这个范围时表明我们想要改变它的大小 当我们点击方块的这些红色区域时,方快就知道我们想要改变它的大小 代码实现: // 获取event对象,兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseDownY = ev.clientY; // 方块上下
-
jquery利用拖拽方式在图片上添加热链接
本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程,分享给大家供大家参考.具体如下: 运行效果截图如下: 项目的需求,要在一张图片上加不同的链接,比如说,图片是一个套房,里面有沙发,茶几,酒柜,电视柜等,然后在这些物件上加一个超链接,点击后打开相关产品的介绍. 用jquery写了一个在图片添加锚点的功能,实现的原理:一个文本框写入标题,一个文本框写链接,一个添加按钮,一个编辑按钮,当写好内容后点击添中添加,便会在图片的上方出现一个P标签,然后按着鼠标左键拖拽该标签放到相应的地方松
-
js实现带关闭按钮始终显示在网页最底部工具条的方法
本文实例讲述了js实现带关闭按钮始终显示在网页最底部工具条的方法.分享给大家供大家参考.具体如下: 这是一款很实用的代码,给网页加入一个始终显示在浏览器窗口底部的工具栏,可以在上面放上公告,联系人等等信息,此代码的工具条还带有关闭按钮,可以随时关闭 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml
-
关于JS中setTimeout()无法调用带参函数问题的解决方法
本文实例分析了JS中setTimeout()无法调用带参函数问题的解决方法.分享给大家供大家参考,具体如下: 解决方法:重写setTimeout() 方法,需要用到闭包函数.如下: var _st = window.setTimeout; window.setTimeout = function(fRef, mDelay){ if (typeof fRef == 'function') { var argu = Array.prototype.slice.call(arguments, 2);
随机推荐
- JSP之表单提交get和post的区别详解及实例
- js判断浏览器类型的方法
- SWF自适应布局技巧 (Rapid Flash Development)快速Flash开发
- 字符编码详解(基础)
- Array, Array Constructor, for in loop, typeof, instanceOf
- PHP中的串行化变量和序列化对象
- 强制PHP命令行脚本单进程运行的方法
- python 回调函数和回调方法的实现分析
- Python 'takes exactly 1 argument (2 given)' Python error
- C#生成随机数实例
- 规范化的SQL数据修改语句总结
- Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】
- javascript 一个自定义长度的文本自动换行的函数
- java中的转义字符介绍
- Python多线程编程(八):使用Event实现线程间通信
- jQuery 打造动态下滑菜单实现说明
- 详解JavaScript中js对象与JSON格式字符串的相互转换
- 关于C++对象继承中的内存布局示例详解
- Android画图之抗锯齿paint和Canvas两种方式实例
- C#实现窗体与子线程的交互的方法