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

1。子窗体

当设计一个网站，我们需要设计一些形式的子窗体，如
这一步很容易实现，只剩下div OK，请看代码：
复制代码代码如下所示：
这个街区的位置可以改变我的位置。
复制代码代码如下所示：
模态背景。
{
背景颜色：# 999999；
底部：0；
左：0；
不透明性：0.3；
位置：固定；
权利：0；
顶部：0；
Z指数：1100；
}

模态窗口的。
{
背景颜色：# ffffff；
边境：1px solid # 6b94ad；
盒子的影子：5px 5px 5px # 6b94ad；
'microsoft雅黑字体；
Font-size: 12px;
身高：120px；
左：50%；
margin-left: - 160px；
边距：- 160px；
不透明性：1；
位置：固定；
顶部：50%；
宽度：320px；
Z指数：1110；
}

modal-window.head。
{
身高：25px；
颜色：# FFF；
字体重量：600；
背景图像：-moz线性梯度（顶部，# 4a8cc5，# 2963a5）； / * * /火狐
背景图片：（-webkit-gradient线性，左上，左下，色站（0，# 4a8cc5），色站（1，# 2963a5））； / * * / saf4 +铬
过滤器：ProgID：DXImageTransform.Microsoft.gradient（startcolorstr =# 4a8cc5 '，endcolorstr =# 2963a5 '，GradientType = '0'）； / * * / IE
}

modal-window.head中心。
{
2px垫上；
}
与上面的HTML和CSS，上述模态结果可以很容易地实现。其中，左：50%；最高：50%；margin-left: - 160px；边距：- 160px；实现该模态的中枢作用。

当然，模态窗体的大小是固定的风格class.modal-window，这并不意味着模态窗体的大小不可修改，比如，我喜欢写代码：

复制代码代码如下所示：
这个街区的位置可以改变我的位置。

添加the.list-window风格类第二行代码覆盖的大小和位置the.modal-window类，但同时保证模式的形式是在中间显示。
复制代码代码如下所示：
列表的窗口。
{
宽度：600px；
身高：400px；
margin-left:随着改变；
Margin-top:-200px;
}
图
可以看出，这一步骤的实现非常简单。掌握几个关键线的CSS属性是完成模态子表单。
2。你如何拖放子窗体时，鼠标点孩子的头当JQ介绍，我们只需要一些脚本来做这个小特征。不相信我们

复制代码代码如下所示：
VaR左，顶，美元；
$（document）。委托（'。模态窗口。头，'mousedown功能（e）{ {）
左= e.clientx，最高e.clienty美元=美元，（这）。Css（'cursor '，'move）；
This.setCapture（
This.setCapture（），
this.onmousemove =功能（EV）{（EV | | MouseMove事件）；}，
this.onmouseup = MouseUp
）：$（document）。Bind（MouseMove
}）；
函数MouseMove（e）{
var =目标this.parents美元（'模态窗口）；
var = math.max（L（e.clientx -左+数（target.css（'margin-left）。更换（ / /PX美元）| |），-target.position（0））。左）；
var = math.max（T（e.clienty顶+数字（target.css（'margin-top）。更换（ / /PX美元）| |），-target.position（0））。顶）；
我math.min（L，$（窗口），Width（）-（）-（）target.width target.position。左）；
math.min（T，T = $（窗口），Height（）-（）-（）target.height target.position。顶）；
左= e.clientx；
最高e.clienty；
Target.css（{ 'margin-left：L，'margin-top：T }）；
}
功能mouseup（e）{
var el = $ this.css（'cursor '，'default）得到（0）；
el.releasecapture
（
El.releaseCapture（），
el.onmousemove = el.onmouseup = null
）：$（document）。Unbind（MouseMove
}
代码很短，可以在各种浏览器中顺利运行。

其实，它的实施原则很简单，大致分为三个步骤：

当鼠标在模态形式的头（鼠标），该文件是直接绑定到MouseMove和mouseup事件

（2）当鼠标不反弹（不松开鼠标），如果在形式的移动鼠标，它激活鼠标移动功能，并计算鼠标移动的整个形态在时间的位置的距离。

当鼠标弹出（MouseUp）的MouseUp事件，调用绑定的文档和mouseup事件绑定MouseMove事件。

整个过程的原理是：当鼠标鼠标移动，鼠标的移动事件转移到文件，和整个的形式是通过对文件的移动事件处理。

此外，还有一个小技巧是MouseMove，离开全局变量上，记录位置的鼠标与鼠标左键停止位置，然后移动，顶变量进行比较以确定多远的鼠标，使相应位置的移动可以形成模式。

通过对这段代码的分析，发现鼠标移动表单上的任何元素，甚至文档上的元素都相当容易。

例如，如果我们想通过拖放改变窗体的大小，我们只需要在MouseMove事件处理程序调整窗体的大小，这是好的。

有人问什么设置鼠标捕获是是是和ReleaseCapture与正在做的，分别是什么事实上，这是兼容IE，只有IE有两个功能，在这里鄙视ie.setcapture允许当前元素捕获鼠标事件的全部，如果不是，它可能无法与IE浏览器的兼容。