漂浮窗口拖动杂谈（续）

最新推荐文章于 2022-11-22 11:28:53 发布

weixin_30568715

最新推荐文章于 2022-11-22 11:28:53 发布

阅读量64

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/RChen/archive/2007/11/01/946007.html

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

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

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

function mousemove_handler(e){
//

}

function mouseup_handler(e){
//

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

$( " #拖动目标 " ).mousedown( function (){
     //

// 添加鼠标移动和弹起事件的处理函数绑定
$(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 这个思路，问题很简单就解决了。

转载于:https://www.cnblogs.com/RChen/archive/2007/11/01/946007.html