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

1.子窗体

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

这一步很容易实现,只需要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;
}

如图

可以看得出来,这一步的实现是非常简单的,掌握几个关键行的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浏览器哦。

时间: 2016-02-25

鼠标拖拽移动子窗体的JS实现_javascript技巧的相关文章

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

 这篇文章主要介绍了鼠标拖拽移动子窗体的JS实现,需要的朋友可以参考下 1.子窗体   在设计网站的时候,我们需要设计一些模态的子窗体,比如     这一步很容易实现,只需要div+css就ok了,请看代码:    代码如下:     <div class="modal-background"></div>     <div class="modal-window">         <div class="hea

js拖拽的原型声明和用法总结_javascript技巧

下面是自己写的一个关于js的拖拽的原型声明:代码如下 需要注意的问题包括: 1.this的指向到底是指向谁--弄清楚所指的对象 2.call()方法的使用 3.直接将父级原型赋给子级与使用for将其赋给子级有什么区别? 比如: for(var i in Drag.prototype) { LimitDrag.prototype[i]=Drag.prototype[i];----------子级发生改变,其父级并不会受到影响 } LimitDrag.prototype=Drag.prototype

js实现回放拖拽轨迹从过程上进行分析_javascript技巧

今天有点小高兴,csdn博客浏览量过万了,在过去还从来没有过这么高的浏览量呢,不得不说,太多时候还是有些矫情,可看到这些鼓励还是忍不住高兴啊,至少,这样让我有一种行内人员的感觉,吾道不孤啊. 闲话不多说,继续今天的记录,记录回放拖拽痕迹,先从过程上进行分析: 1.要实现回放拖拽痕迹,则必须先有记录: 2.要记录拖拽痕迹,则必须要实现拖拽: 这个问题前几天曾经做到过,当时实现的也略有瑕疵,但大致的实现方法已经了然于胸,所以今天在实现这个问题的时候速度快了不少,着实高兴了一番,今天再实现了一遍之后理

js拖拽一些常见的思路方法整理_javascript技巧

js拖拽的常见思路 1.通过onmousedown,onmousemove,onmouseup分别模拟开始拖拽,拖拽中和拖拽结束时的事件(). 如果手机的触摸事件的话则分别是ontouchstart,ontouchmove和ontouchend. 2.鼠标按下即发生onmousedown事件时:获取鼠标位置,获取被拖动元素的位置,记录两者之间的纵横坐标的差值().对document元素绑定onmousemove,onmouseup事件. 刚开始接触js拖拽时,我当时疑惑的是为什么是对docume

关于js拖拽上传 [一个拖拽上传修改头像的流程]_javascript技巧

如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其中的要点和实践体会做一点总结.  先看一下总体视图:1. 文件拖拽接受区域要有明显的标示,并且要尽可能的大(由于版面的原因,这个界面的拖放盒子并不大).可以用虚线框盒子等样式吸引用户拖拽文件.最好有明显的文字提示和图标配合. 2. 在交互体验上当文件拖入浏览器窗口时,可以用拖放区变换背景颜色等向用户发起放置操作邀请. 实现代码: 复制代码 代码如下: doc.bind({ 'drag

javascript拖拽上传类库DropzoneJS使用方法_javascript技巧

用法 1. add js and css style 复制代码 代码如下: <link href="~/Dropzone/css/basic.css" rel="stylesheet" /> <link href="~/Dropzone/css/dropzone.css" rel="stylesheet" /> <script src="~/Dropzone/dropzone.min.j

滚动条响应鼠标滑轮事件实现上下滚动的js代码_javascript技巧

实现鼠标滚动滚轮事件: <script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta==120) { //向上滚动事件 alert(e.wheelDeta +"向上"); }else { //向上滚动事件 alert(e.wheelDeta +"

鼠标放在图片上显示大图的JS代码_javascript技巧

显示大图和隐藏大图的js代码: 复制代码 代码如下: <script type="text/javascript">   //显示图片   function over(imgid,obj,imgbig)   {//大图显示的最大尺寸  4比3的大小  400 300maxwidth=400;maxheight=300; //显示        obj.style.display="";        imgbig.src=imgid.src;      

在父页面调用子页面的JS方法_javascript技巧

今天弄了一天了,终于在网上找到了解决办法 注意:问题是在父页面调用子页面的方法..... 父页面:parent.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.o