How to Implement javascript event processing and mouse dragging

First look at the layer to be dragged (simulate the window.

Drag effect: Click the left mouse button on the title bar above the window and move the mouse at the same time.
Window:
Copy codeThe Code is as follows:
<Div id = "win">
<Div id = "win_header"> </div>
</Div>

Some preparations:
To allow the window to move freely, the position of the window should adopt the absolute position (absolute );
Add a title bar to the window, which is implemented by a layer placed on the top of the window, and set the cursor of the title bar to move (when dragging in chrome, the cursor changes to a text cursor. Release the mouse key and restore it ).
Copy codeThe Code is as follows:
# Win {
Position: absolute;
Width: 480px;
Height: 320px;
Background-color: # d4d4d4;
Border: 1px solid # 4d4d4d;
}
# Win_header {
Width: 480px;
Height: 48px;
Background-color: # 4d4d4d;
Cursor: move;
}

Defines a tool function to obtain the elements of the specified ID attribute:
Copy codeThe Code is as follows:
Function $ id (id ){
Return document. getElementById (id );
}

Define a browser core identifier isIE:
Var isIE = (window. navigator. userAgent. indexOf ("IE") =-1 )? False: true;
The window elements and their title bars are obtained:
Copy codeThe Code is as follows:
Var win = $ id ("win ");
Var header = $ id ("win_header ");

To easily record the location information of the mouse and window, create a location:
Copy codeThe Code is as follows:
Var pos = function (x, y ){
This. x = x;
This. y = y;
};

Set an initial position for the window (left and top values of css ).
I don't know why. If you don't use js to set these two attributes, you won't be able to get the value, nor can you specify it in CSS.
Copy codeThe Code is as follows:
Var originalpos = new pos (20, 20 );

During the window dragging process, the following values must be recorded:
Position of the cursor when the mouse is pressed
Copy codeThe Code is as follows:
Var oldmouse = new pos (0, 0 );

Position of the window when the mouse is pressed
Var oldpos = new pos (0, 0 );
New Position of the window when the mouse moves
Var newpos = new pos (0, 0 );
Set the initial position of the window
Copy codeThe Code is as follows:
Win. style. left = originalpos. x + "px ";
Win. style. top = originalpos. y + "px ";

Because of browser differences (IE and non-IE), the method for binding event handlers to elements is different (IE uses attachEvent and non-IE uses addEventListener). To simplify event binding, define an event binding function:
Copy codeThe Code is as follows:
Function bind (ev, func ){
If (isIE ){
Header. attachEvent ("on" + ev, func );
} Else {
Header. addEventListener (ev, func, false );
}
}

After doing this, you can start to process mouse events.
In this program, you only want to drag the window with the left mouse button, other keys are not allowed, so you need to determine whether the left mouse button is pressed. This judgment will be used in several functions, so it is extracted to a function and determined by the input parameter (the mouse key value, that is, the key pressed. Note the differences between browsers: in IE, the left mouse button value is 1, rather than the IE value is 0.
Copy codeThe Code is as follows:
Function isLeftButton (btn ){
If (isIE ){
If (btn = 1)
Return true;
Else
Return false;
} Else {
If (btn = 0)
Return true;
Else
Return false;
}
}

The drag operation is completed by pressing the left mouse button and moving it. Share this action, that is, the mouse triggers the mouse to press the action (mousedown) and then triggers the move action (mousemove ). To determine whether it is really dragging or just passing through the window with the mouse, set a variable to record the status of the mouse Press:
Var mousedown = false;
Due to the compatibility issue in CSS, JavaScript is used to control the color changes when the mouse is hovering over the window title bar.
Floating
Copy codeThe Code is as follows:
Function over (e ){
Header. style. backgroundColor = "# 5d5d5d ";
}

Leave
Copy codeThe Code is as follows:
Function out (e ){
Header. style. backgroundColor = "# 4d4d4d ";
// Sometimes the mouse leaves the window without being released,
// At this time, the window is out of control by triggering the mouse release event
Up (e );
}

Press
In the press event, you must first determine whether to press the left mouse button;
If you only record the position of the mouse and window at this time, otherwise no record is made.
Copy codeThe Code is as follows:
Function down (e ){
E = e | event;
If (! IsLeftButton (e. button ))
Return;
Mousedown = true;
Oldmouse. x = e. clientX;
Oldmouse. y = e. clientY;
Oldpos. x = parseInt (win. style. left. replace ("px ",""));
Oldpos. y = parseInt (win. style. top. replace ("px ",""));
}

Release
Copy codeThe Code is as follows:
Function up (e ){
If (! IsLeftButton (e. button ))
Return;
Mousedown = false;
}

Mobile
Two mouse events are involved:
Press and move. The move action is valid only when the left mouse button is pressed.
The new position of the window is determined by the moving distance (the distance between X and Y) when the mouse is dragging. That is:
Send the new mouse position to the position recorded when you press the left button to get a distance. Then, add the cursor to the position of the window to get the new position of the window.
Copy codeThe Code is as follows:
Function move (e ){
If (! IsLeftButton (e. button ))
Return;
If (mousedown ){
E = e | event;
Newpos. x = e. clientX-oldmouse. x;
Newpos. y = e. clientY-oldmouse. y
Win. style. left = (oldpos. x + newpos. x) + "px ";
Win. style. top = (oldpos. y + newpos. y) + "px ";
}
}

The event processing has been completed. Finally, bind the element. Amen!
Copy codeThe Code is as follows:
Bind ("mouseover", over );
Bind ("mouseenter", over );
Bind ("mouseout", out );
Bind ("mouseleave", out );
Bind ("blur", out );
Bind ("mousedown", down );
Bind ("mouseup", up );
Bind ("mousemove", move );

But there is a problem with the drag in FF. It can only be dragged normally for the first time, and the back is a bit messy!