鼠标拖拽移动子窗体的JS实现


Posted in Javascript onFebruary 25, 2014

1.子窗体

在设计网站的时候,我们需要设计一些模态的子窗体,比如

鼠标拖拽移动子窗体的JS实现

这一步很容易实现,只需要div+css就ok了,请看代码:

    <div class="modal-background"></div>
    <div class="modal-window">
        <div class="head">
            <center>点住着块区域可以改变我的位置</center>
        </div>
    </div>

.modal-background
{
    background-color: #999999;
    bottom: 0;
    left: 0;
    opacity: 0.3;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1100;
}
.modal-window
{
    background-color: #FFFFFF;
    border: 1px solid #6B94AD;
    box-shadow: 5px 5px 5px #6B94AD;
    font-family: 'Microsoft YaHei';
    font-size: 12px;
    height: 120px;
    left: 50%;
    margin-left: -160px;
    margin-top: -160px;
    opacity: 1;
    position: fixed;
    top: 50%;
    width: 320px;
    z-index: 1110;
}
    .modal-window .head
    {
        height: 25px;
        color: #fff;
        font-weight: 600;
        background-image: -moz-linear-gradient(top, #4A8CC5, #2963A5); /* Firefox */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4A8CC5), color-stop(1, #2963A5)); /* Saf4+, Chrome */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A8CC5', endColorstr='#2963A5', GradientType='0'); /* IE*/
    }
        .modal-window .head center
        {
            padding-top: 2px;
        }

加上上述html和css就可以很容易实现上述模态窗体的效果。其中left: 50%;top: 50%; margin-left: -160px; margin-top: -160px;是为了实现这个模态窗体的居中效果。

当然,模态窗体的大小在样式类.modal-window中是固定写好的了,这并不是说不可修改模态窗体的大小,比如我写如代码:

    <div class="modal-background"></div>
    <div class="modal-window list-window">
        <div class="head">
            <center>点住着块区域可以改变我的位置</center>
        </div>
    </div>

在第二行代码中追加了.list-window这个样式类来覆盖.modal-window类中的大小和位置,但同时保证模态窗体居中显示

.list-window
{
    width:600px;
    height:400px;
    margin-left:-300px;
    margin-top:-200px;
}

如图

鼠标拖拽移动子窗体的JS实现

可以看得出来,这一步的实现是非常简单的,掌握几个关键行的css属性就"完虐"这个模态子窗体,各类其它的模态子窗体可以举一反三咯。

2.当鼠标点住子窗体的头部时,如何实现子窗体的拖拽移动呢?当引入jQ后,我们只需要很少的脚本就搞定这个小功能。不信我们看

var left, top, $this;
$(document).delegate('.modal-window .head', 'mousedown', function (e) {
    left = e.clientX, top = e.clientY, $this = $(this).css('cursor', 'move');
    this.setCapture ? (
    this.setCapture(),
    this.onmousemove = function (ev) { mouseMove(ev || event); },
    this.onmouseup = mouseUp
    ) : $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp);
});
function mouseMove(e) {
    var target = $this.parents('.modal-window');
    var l = Math.max((e.clientX - left + Number(target.css('margin-left').replace(/px$/, '')) || 0), -target.position().left);
    var t = Math.max((e.clientY - top + Number(target.css('margin-top').replace(/px$/, '')) || 0), -target.position().top);
    l = Math.min(l, $(window).width() - target.width() - target.position().left);
    t = Math.min(t, $(window).height() - target.height() - target.position().top);
    left = e.clientX;
    top = e.clientY;
    target.css({ 'margin-left': l, 'margin-top': t });
}
function mouseUp(e) {
    var el = $this.css('cursor', 'default').get(0);
    el.releaseCapture ?
    (
        el.releaseCapture(),
        el.onmousemove = el.onmouseup = null
    ) : $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp);
}

这段代码非常简短,能否在各种浏览器中很流畅的运行。

其实它的实现原理非常简单,大致分为三步:

①当鼠标在模态窗体头部点下(mousedown)时,立即给document绑定mousemove和mouseup事件

②当鼠标没有弹起时(没有mouseup)时,若鼠标在窗体内移动时,激活mouseMove函数,通过计算鼠标移动的距离来及时整个窗体的位置移动。

③当鼠标弹起(mouseup)时,调用mouseUp事件,将document上绑定的mousemove事件和mouseup事件解除绑定。

整个过程的原理就是:当鼠标mousedown时,鼠标的移动事件转移到document上来,通过鼠标在document上的移动事件来对整个窗体进行处理。

另外,在mouseMove中有个小技巧,就是全局的left,top变量记录上一次鼠标停止时的位置,然后下一次移动时鼠标的位置与left,top变量进行对比来确定鼠标移动了多少距离,来对整个模态子窗体做出相应的位置移动即可。

经过这一段代码的分析,发现鼠标移动窗体乃至document上的任何元素都是相当easy的

比如,如果想要通过拖拽来改变窗体的大小,一样我们只需要在mouseMove事件处理函数中调整窗体的大小就ok了,是不是又发现自己有多学会了一招,又精进了一小步呢?

有人会问setCapture和releaseCapture分别都是干什么的呢?其实这是为了兼容IE,仅有IE才有这俩函数,在此鄙视IE。setCapture可以让当前元素捕获鼠标的所有事件,如果不使用它们,可能不兼容IE浏览器哦。

Javascript 相关文章推荐
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
js判断为空Null与字符串为空简写方法
Feb 24 #Javascript
JS清空多文本框、文本域示例代码
Feb 24 #Javascript
脚本合并提升javascript性能示例
Feb 24 #Javascript
动态加载脚本提升javascript性能
Feb 24 #Javascript
巧用局部变量提升javascript性能
Feb 24 #Javascript
javascript中的原型链深入理解
Feb 24 #Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 #Javascript
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
图片onload事件触发问题解决方法
2011/07/31 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python计算一个文件里字数的方法
2015/06/15 Python
Python实现包含min函数的栈
2016/04/29 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
python学生管理系统学习笔记
2019/03/19 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python 瀑布线指标编写实例
2020/06/03 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
申报职称专业技术个人的自我评价
2013/12/12 职场文书
学生打架检讨书大全
2014/01/23 职场文书
校园活动策划方案
2014/06/13 职场文书
食品安全处置方案
2014/06/14 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
机关作风建设工作总结
2014/10/23 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
催款通知书范文
2015/04/17 职场文书
新年晚会开场白
2015/05/29 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS