How to Implement the drag DIV using js

How to Implement the drag DIV using js

This article mainly introduces how to implement the drag DIV in js. If you need it, refer to it.

As the times change, JavaScript becomes more and more important. js can not only make web pages (such as the Ext framework), but also make some web special effects, which are not only compatible with PC, it is also compatible with mobile phones. After all, it is browser-based and 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 the mousedown event of the mouse div

 

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 div object

 

 

Copy the Code 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 div 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 the MouseMove and MouseUp events of the div. If you do not 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 div coordinates.

 

Some may ask why-x,-y?

 

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

 

The coordinates of the mouse arrow are the same as those of the x and y coordinates of the div. After the cursor is dragged, the cursor is positioned in the upper left corner. The effect is that the cursor is flushed after being dragged.

 

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.