鼠标拖拽移动子窗体的射流研究…实现

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

这一步很容易实现，只需要div css就好的了，请看代码：复制代码代码如下' : div class='模态-背景/div类='模态-窗口' div class='头部'中心点住着块区域可以改变我的位置/中心/分区/分区复制代码代码如下：模态背景{背景色： # 999999；底部： 0；左： 0；opacity: 0.3位置：固定；右： 0；top : 0；z指数： 1100；}.模态窗口{底色： # FFFFFFborder: 1px固体# 6B 94 adbox-shadow : 5px 5px 5px # 6B 94 ad；字体系列： '微软雅黑；font-size : 12px高度： 120像素；左侧： 50%;边距-左侧：-160像素；边距-top :-160 px；opa城市3360 1；位置：固定；前：名50%；宽度： 320 pxz指数： 1110；} .模态窗口。头部{ height : 25 xcolor : # fff font-weight : 600；背景-图像：-蚊子-线性-渐变（顶部、#4A8CC5、# 2963 a5)；/* Firefox */背景-图像：-网页套件-渐变(线性、左上、左下、色停(0，#4A8CC5)、色停(1，# 2963 a5))；/* Saf4，Chrome */filter : progid : maximagettransform .微软。渐变(startcolorst=' # 4a8cc 5 '，endColorstr=' # 2963A5 '，渐变类型=' 0 ')；/* IE*/} .模态窗口。头部中心{ padding-top : 2px；}加上上述超文本标记语言和钢性铸铁就可以很容易实现上述模态窗体的效果。其中左侧： 50%;前：名50%；边距-左侧：-160像素；边距-top :-160 px；是为了实现这个模态窗体的居中效果。当然，模态窗体的大小在样式类。模态窗口中是固定写好的了，这并不是说不可修改模态窗体的大小，比如我写如代码：复制代码代码如下' : div class='模态-背景/div类='模态-窗口列表-窗口' div class='头部'中心点住着块区域可以改变我的位置/中心/分区/分区在第二行代码中追加了。列表窗口这个样式类来覆盖。模态窗口类中的大小和位置，但同时保证模态窗体居中显示复制代码代码如下：列表-窗口{宽度：600 px高度：400 px边距-左侧：-300像素；边距-top :-200 px；}如图

可以看出，这一步的实现非常简单。掌握几个关键行的css属性，会‘完全滥用’这个模态子窗体，其他各种模态子窗体都可以举一反三。2.当鼠标点击子窗体的头部时，如何拖拽子窗体？当引入jQ时，我们只需要几个脚本就可以修复这个小函数。如果不相信我们，复制代码如下：var左，顶，$ this$(文档)。委托('。模态窗口。head '，' mousedown '，function (e) { left=e.clientX，top=e.clientY，$this=$(this)。css('光标'，'移动')；这个. setCapture？(this.setCapture()、this . onmousemove=function(ev){ mouseMove(ev | | event)；}，this.onmouseup=mouseUp ) : $(文档)。绑定(' mousemove '，mouseMove)。bind('mouseup '，mouse up)；});函数MouseMoVE(e){ var target=$ this . parents ' .模态窗口’)；var l=math . max((e . clientx-left Number(target . CSS(' margin-left ')。替换(/px$/，' '))|| 0)，-target.position()。左)；var t=math . max((e . clienty-top Number(target . CSS(' margin-top ')。替换(/px$/，' '))|| 0)，-target.position()。顶部)；l=Math.min(l，$(窗口)。width()-target . width()-target . position()。左)；t=Math.min(t，$(窗口)。height()-target . height()-target . position()。顶部)；left=e.clientXtop=e.clientYtarget . CSS({ ' margin-left ' : l，' margin-top ' :t })；}函数MouseUp(e){ var El=$ this . CSS(' cursor '，' default ')。get(0)；el.releaseCapture？(el.releaseCapture()，El . onmousemove=El . onmouseup=null): $(文档)。解除绑定(' mousemove '，Mosemove)。解除绑定(' mouseup '，Mouseup)；}此代码非常短。它能在各种浏览器中流畅运行吗？其实它的实现原理很简单，大致可以分为三步：鼠标按下时，立即将mouseMove和mouseup事件绑定到文档；当鼠标不弹跳(无mouseup)时，如果鼠标在窗体内移动，激活mousemove功能，计算鼠标移动的距离，及时移动整个窗体的位置。当鼠标弹出时，调用mouseup事件，解除文档上绑定的mousemove事件和mouseUp事件的绑定。整个过程的原理是：鼠标按下时，鼠标移动事件传递到文档，通过文档上的鼠标移动事件处理整个表单。另外，mouseMove中还有一个小技巧，就是全局的左、顶变量记录鼠标上次停止时的位置，然后将鼠标的位置与下一次移动时的左、顶变量进行比较，确定鼠标移动了多远，从而移动整个模态子窗体的位置。分析这段代码后，发现鼠标移动表单甚至文档上的任何元素都相当容易。例如，如果你想通过拖放来改变窗体的大小，我们只需要在mouseMove事件处理程序中调整窗体的大小，这样就可以了。你发现自己学会了一个小技巧，迈出了一小步吗？有人可能会问setCapture和releaseCapture分别是做什么的。其实这是为了兼容IE。只有IE有这两个功能，所以我在这里鄙视IE。SetCapture允许当前元素捕获所有鼠标事件。如果不使用它们，可能与IE浏览器不兼容。