Javascript method for implementing the drag DIV _ javascript skills

This article mainly introduces how to implement the drag DIV in Javascript. If you need it, you can refer to the changes of the times and feel the importance of JavaScript, js not only supports web pages (such as the Ext framework), but also some web special effects. These effects are not only compatible with PC, but also with mobile phones. After all, they are browser-based, it has nothing to do with the platform. Now Microsoft's Windows 8 system apps can be developed using js. You can try it out later.

Now let's start with the topic. Let's talk about the Javascript Implementation of the movable Div. To implement this function, let's first talk about the idea:

1. Capture mouse p's mousedown event

2. Capture the mousemove event of the document

3. Cancel the event

Then let's take a look at the Code:

The Code is as follows:

Function Drag (id ){
Var $ = function (flag ){
Return document. getElementById (flag );
}
$ (Id). onmousedown = function (e ){
Var d = document;
Var page = {
Event: function (evt ){
Var ev = evt | window. event;
Return ev;
},
PageX: function (evt ){
Var e = this. event (evt );
Return e. pageX | (e. clientX + document. body. scrollLeft-document. body. clientLeft );
},
PageY: function (evt ){
Var e = this. event (evt );
Return e. pageY | (e. clientY + document. body. scrollTop-document. body. clientTop );

},
LayerX: function (evt ){
Var e = this. event (evt );
Return e. layerX | e. offsetX;
},
LayerY: function (evt ){
Var e = this. event (evt );
Return e. layerY | e. offsetY;
}
}
Var x = page. layerX (e );
Var y = page. layerY (e );
If (dv. setCapture ){
Dv. setCapture ();
}
Else if (window. captureEvents ){
Window. captureEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}
D. onmousemove = function (e ){
Var tx = page. pageX (e)-x;
Var ty = page. pageY (e)-y;
Dv. style. left = tx + "px ";
Dv. style. top = ty + "px ";
}
D. onmouseup = function (){
If (dv. releaseCapture ){
Dv. releaseCapture ();
}
Else if (window. releaseEvents ){
Window. releaseEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}
D. onmousemove = null;
D. onmouseup = null;
}
}
}

Code Analysis:

1.

Get p object

The Code is as follows:

Var $ = function (flag ){
Return document. getElementById (flag );
}

2. Capture the mousedown event of the document:

There is such a piece of code:

The Code is as follows:

Var page = {
Event: function (evt ){
Var ev = evt | window. event;
Return ev;
},
PageX: function (evt ){
Var e = this. event (evt );
Return e. pageX | (e. clientX + document. body. scrollLeft-document. body. clientLeft );
},
PageY: function (evt ){
Var e = this. event (evt );
Return e. pageY | (e. clientY + document. body. scrollTop-document. body. clientTop );

},
LayerX: function (evt ){
Var e = this. event (evt );
Return e. layerX | e. offsetX;
},
LayerY: function (evt ){
Var e = this. event (evt );
Return e. layerY | e. offsetY;
}
}

Where the event gets the mouse event, pageX, pageY gets the coordinates of the mouse, layerX, layerY gets the distance between the mouse and the p border.

There is also code:

The Code is as follows:

If (dv. setCapture ){
Dv. setCapture ();
}
Else if (window. captureEvents ){
Window. captureEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}

This is to capture p's MouseMove and MouseUp events. If you don't know about tx, you can check them online.
3. The MouseMove and mouseUp events of the document:

The Code is as follows:

D. onmousemove = function (e ){
Var tx = page. pageX (e)-x;
Var ty = page. pageY (e)-y;
Dv. style. left = tx + "px ";
Dv. style. top = ty + "px ";
}
D. onmouseup = function (){
If (dv. releaseCapture ){
Dv. releaseCapture ();
}
Else if (window. releaseEvents ){
Window. releaseEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}
D. onmousemove = null;
D. onmouseup = null;
}

Tx and ty are the most important codes. They are used to set the pcoordinate.

Some may ask why-x,-y?

X and y are actually the distance between the mouse and the p border. If not

The coordinates of the mouse arrow are the same as those of x and y of p. After dragging, the cursor is positioned in the upper left corner.

The Code is as follows:

If (dv. releaseCapture ){
Dv. releaseCapture ();
}
Else if (window. releaseEvents ){
Window. releaseEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}
D. onmousemove = null;
D. onmouseup = null;

The above code cancels the onmousemove and onmouseup events of the document after the mouse is released.

I have been studying js recently. I will share my new experiences with you and hope to learn and make progress together.