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

2020-02-20 16:00:38来源：爱站网阅读 ()

本文是爱站技术频道小编为大家带来的鼠标拖拽移动子窗体的JS实现，其实鼠标拖拽的变化是很有技巧的，别着急，小编将带大家细细了解，希望能帮到大家。

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);

}