JS implementation of mouse dragging and moving subforms_javascript skills

1. Subform

When designing a website, we need to design some modal subforms, such as

This step is easy to implement, you only need div css, please see the code:

Copy the code The code is as follows:

 

 

 

                                                                                   

Copy code

The code is as follows:.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;
}

By adding the above html and css, you can easily achieve the effect of the above modal form. Among them, left: 50%; top: 50%; margin-left: -160px; margin-top: -160px; are to achieve the centering effect of this modal form.

Of course, the size of the modal form is fixed in the style class .modal-window. This does not mean that the size of the modal form cannot be modified. For example, I wrote the following code:

Copy code

The code is as follows:

 

My location

                                                          

In the second line of code, the .list-window style class is added to cover the size and position in the .modal-window class, but at the same time ensure that the modal form is displayed in the center




Copy code

The code is as follows:

.list-window

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

As shown in the picture

It can be seen that the implementation of this step is very simple. Mastering the css attributes of a few key lines can "completely abuse" this modal subform. You can draw inferences about other modal subforms.

2. How to drag and move the subform when the mouse clicks on the head of the subform? When jQ is introduced, we only need a few scripts to implement this small function. If you don’t believe it, let’s see

Copy code The code is as follows:

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

This code is very short and can run smoothly in various browsers.

In fact, its implementation principle is very simple and can be roughly divided into three steps:

①When the mouse is clicked (mousedown) on the head of the modal form, immediately bind the mousemove and mouseup events to the document

② When the mouse does not bounce up (no mouseup), if the mouse moves within the form, the mouseMove function is activated, and the position of the entire form is moved in time by calculating the distance of the mouse movement.

③When the mouse bounces up (mouseup), call the mouseUp event to unbind the mousemove event and mouseup event bound to the document.

The principle of the whole process is: when the mouse is mousedown, the mouse movement event is transferred to the document, and the entire form is processed through the mouse movement event on the document.

In addition, there is a little trick in mouseMove, that is, the global left and top variables record the position of the last time the mouse stopped, and then compare the position of the mouse with the left and top variables the next time it moves to determine how much the mouse has moved. distance to move the entire modal subform accordingly.

After analyzing this piece of code, I found that it is quite easy to move the form or even any element on the document with the mouse

For example, if you want to change the size of the form by dragging and dropping, we only need to adjust the size of the form in the mouseMove event handler function. Do you find that you have learned another trick? A small step forward?

Some people may ask what setCapture and releaseCapture do respectively? In fact, this is for compatibility with IE. Only IE has these two functions. I despise IE here. setCapture allows the current element to capture all mouse events. If you don't use them, it may not be compatible with IE browser.