Javascript Implementation of moving a child form by dragging the mouse

Javascript Implementation of moving a child form by dragging the mouse

This article mainly introduces the JS Implementation of moving sub-forms by dragging the mouse. For more information, see

1. subform

 

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

 

 

This step is easy to implement. It only requires div + css to be OK. Please refer to the Code:

 

The Code is as follows:

<Div class = "modal-background"> </div>

<Div class = "modal-window">

<Div class = "head">

<Center> point living block area can change my location </center>

</Div>

</Div>

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;

}

 

 

 

With the above html and css, you can easily implement the above modal form effect. Here, left: 50%; top: 50%; margin-left:-160px; margin-top:-160px; is used to center the modal form.

 

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

 

The Code is as follows:

<Div class = "modal-background"> </div>

<Div class = "modal-window list-window">

<Div class = "head">

<Center> point living block area can change my location </center>

</Div>

</Div>

 

 

In the second line of code, the. list-window style class is appended to overwrite the size and position of the. modal-window class, while ensuring that the modal form is displayed in the center.

 

The Code is as follows:

. List-window

{

Width: 600px;

Height: 400px;

Margin-left:-300px;

Margin-top:-200px;

}

 

 

 

 

It can be seen that the implementation of this step is very simple. to grasp the css attributes of several key rows, We will "Abuse" the modal subforms. Other modal subforms can be described in the opposite way.

 

 

2. How to drag and drop a child form when the mouse clicks the header of the child form? After jQ is introduced, we only need a few scripts to implement this small function. Believe it or not.

 

The Code is as follows:

Var left, top, $ this;

$ (Document). delegate ('. modal-window. head', 'mousedown', function (e ){

Left = e. clientX, top = e. clientY, $ this = require (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 = export 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 be run smoothly in various browsers.

 

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

 

① When the mouse is down (mousedown) at the head of the modal form, it immediately binds the mousemove and mouseup events to the document.

 

② When the mouse does not pop up (no mouseup), if the mouse moves in the form, the mouseMove function is activated to adjust the position of the entire form in time by calculating the distance between the mouse moves.

 

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

 

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

 

In addition, there is a trick in mouseMove: Global left. The top variable records the position of the last stop of the mouse, and then the position of the mouse and left when the next move, the top variable is compared to determine how much distance the mouse moves to move the entire modal subform.

 

After analyzing the code, it is found that moving the mouse over the form or any element on the document is quite easy.

 

For example, if you want to change the size of the form by dragging it, you only need to adjust the size of the form in the mouseMove event processing function. Is it true that you have learned one more trick, is it a small step?

 

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