以前我发过一个:实现浏览器兼容的漂浮窗体拖动/改变尺寸的技术要点

另外还提到一个 jquery 的插件 easydrag,这个插件处理拖放还算好用,但自从我上次修改后,现在又发现了它的另一个 bug. 在应用了 easydrag 的页面中,某种情况下会在页面加载时出现“找不到对象”的脚本错误。经过仔细检查,发现问题在于 easydrag 中过早的绑定了 document 的 mousemove 和 mouseup 事件,而有时候脚本加载的时候 document 还没有 ready, 自然就会“找不到对象”了。

解决问题的办法很简单,我们推迟这两个事件的绑定即可:

functionmousemove_handler(e){//dot.gif}functionmouseup_handler(e){//dot.gif//解除鼠标移动和弹起事件的处理函数绑定$(document).unbind("mousemove", mousemove_handler).unbind("mouseup", mouseup_handler);
}

$("#拖动目标").mousedown(function(){//dot.gif//添加鼠标移动和弹起事件的处理函数绑定$(document).mousemove(mousemove_handler).mouseup(mouseup_handler);
})

注意上面代码中 unbind 事件也是很必要的。

另外推荐一个很好的 jquery 插件 —— background iframe.
以前我们写网页中的日历控件之类的,为了遮住 <select> (IE 6.0 或以下),一般都是用一个

<div><iframe></iframe></div>

来加载弹出的内容。但是这样有个问题,就是加载的文档和当前文档不是一个页面,那么在 asp.net 等后台代码里,就不是很方便做数据绑定,因为多了一个页面,就需要多出很多不必要的变量传递工作。

而 background iframe 的原理是,你可以在当前页面的 <div></div> 里直接写弹出内容,它负责动态的在这个 div 中插入一个透明的 iframe 作为背景的遮罩,这样也一样能达到遮挡 <select> 的效果。
调用方式也非常简单:

$("#some_layer").bgiframe();

这样就可以了。

这里联想到,编程真的是思路最重要。记得以前看 meizz 的日历控件代码,通过 iframe 的方式写入,实现很复杂,现在如果换了 background iframe 这个思路,问题很简单就解决了。

漂浮窗口拖动杂谈(续)相关推荐

  1. duilib进阶教程 -- 改进窗口拖动 (12)

    现在大家应该都知道caption="0,0,0,32",是指示标题栏区了吧,如果想要整个窗口都能拖动呢? 那直接把高度改成和窗口一样不就得了~O(∩_∩)O~ 嗯,这样是可以,比如 ...

  2. html悬浮窗口退出,网页中可关闭的漂浮窗口实现

    注释部分为广告的左右调节,可以自行设定 网页中可关闭的漂浮窗口 关闭 点击这里,关闭广告!!! var bodyfrm = ( document.compatMode.toLowerCase()==& ...

  3. 网站html漂浮代码大全,网页漂浮窗口代码

    漂浮窗口代码 var x = 50,y = 60 var xin = true, yin = true var step = 1 var delay = 10 var obj=document.get ...

  4. 【javaScript】原生实现窗口拖动效果

    窗口拖动 通过原生javaScript进行窗口拖动的实现 一.功能 通过javaScript实现自定义容器的拖动操作,通过拖动标题部分进行窗口的移动 二.实现思路 通过鼠标左键按下触发条件 通过eve ...

  5. 【最终版】PyQt5 自定义标题栏,实现无边框,最小化最大化关闭事件,窗口拖动移动,窗口改变大小,仿百度网盘色调美化,添加内容窗口

    [最终版]PyQt5 自定义标题栏,实现无边框,最小化最大化关闭事件,窗口拖动移动,窗口改变大小,仿百度网盘色调美化,添加内容窗口 文章目录 [最终版]PyQt5 自定义标题栏,实现无边框,最小化最大 ...

  6. PyQt5 自定义标题栏,实现无边框,最小化最大化关闭事件,窗口拖动移动,窗口改变大小,仿百度网盘色调美化

    PyQt5 自定义标题栏,实现无边框,最小化最大化关闭事件,窗口拖动移动,窗口改变大小,仿百度网盘色调美化 文章目录 PyQt5 自定义标题栏,实现无边框,最小化最大化关闭事件,窗口拖动移动,窗口改变 ...

  7. JQuery窗口拖动效果

    2019独角兽企业重金招聘Python工程师标准>>> JQuery代码 var _z=9999; $(document).ready(function(){var _move=fa ...

  8. JS通用窗口拖动函数

    <script language="JavaScript" type="text/javascript">// 点击拖动窗口- 调用请使用: οnm ...

  9. qt实现窗口拖动的两种思路

    提要 窗口按下鼠标不放拖动窗口移动,鼠标释放的时候,停止拖动.这个过程可以用两种方法来实现. 1.鼠标点击后,获取鼠标按下点的坐标和起初窗口左上角的坐标,用鼠标按下点的坐标减去鼠标左上角的坐标,求出这 ...

最新文章

  1. 区块链热度不断,那么究竟是泡沫还是未来?
  2. 实验四 使用C++的mfc实现圆心为任意位置的圆的绘制。
  3. 非视线成像 - 把墙角变为相机
  4. 查看target/classes/.../dao/文件夹下,发现只有mapper的class文件,而没有xml文件 的解决方法。
  5. php处理微信返回xml数据,php将微信返回的xml格式转换成数组
  6. Git『Everything up-to-date』问题解决
  7. double类型计算
  8. 实验9 SQL Server 的触发器
  9. 中国移动首款自主品牌5G手机上市:同步支持NSA/SA
  10. php通过ip地址查询位置,PHP通过IP获取地理位置
  11. 杭电 2016 计算机组成原理,杭电计算机组成原理多功能ALU设计实验
  12. 物联网通信协议-modbus
  13. 打开计算机不显示硬盘盘符,电脑硬盘不显示盘符怎么办 移动硬盘不显示盘符的原因...
  14. 基于Java毕业设计游戏销售系统源码+系统+mysql+lw文档+部署软件
  15. Arthas——热替换
  16. win10上不了网服务器未响应,win10的DNS 服务器未响应
  17. windows服务器双网卡修改默认路由,windows下双网卡双网关的设置
  18. AI 算法是如何改变智能风控的 | 文末赠书
  19. 谷歌中国开发者网站地址
  20. Tank Game V0.2

热门文章

  1. 复习-css列表和表格相关属性
  2. 1月17日学习内容整理:Scrapy框架补充之pipeline,去重规则
  3. 张尧学:祝YOCSEF越办越好
  4. MyISAM 和 InnoDB 讲解
  5. Java语言与C++语言在作用域上的差异
  6. 古典密码算法------替代密码算法
  7. /home/appleyuchi主目录迁移到新磁盘中
  8. 大数据实时推荐系统的思考
  9. hbase的gui工具调研
  10. hiveserver或者hive启动出现Expected authority at index 7问题解决