JQuery drag div implementation _ jquery-js tutorial

JQuery drag and drop the div, and use jquery's mousemove, mousedown, and mouseup events. If you need them, you can refer to the following ideas: Use jquery's mousemove, mousedown, and mouseup events, define two relative positions:

1. The relative position between the upper left corner of the widget and the upper left corner of the screen

2. The coordinates of the mouse and the relative position in the upper left corner of the widget.

The specific functions are as follows:

The Code is as follows:

. Drag {
Position: absolute;
Background: # 0000CC;
Top: 100px; left: 200px;
Padding: 0;
}

The Code is as follows:

$ (Document). ready (function (){
Var move = false; // move the tag
Var _ x, _ y; // the relative position of the cursor in the upper left corner of the control.
$ (". Drag"). mousedown (function (e ){
Move = true;
_ X = e. pageX-parseInt ($ (". drag" ).css ("left "));
_ Y = e. pageY-parseInt ($ (". drag" ).css ("top "));
});
$ (Document). mousemove (function (e ){
If (move ){
Var x = e. pageX-_ x; // relative position from the upper left corner of the control to the upper left corner of the screen
Var y = e. pageY-_ y;
$ (". Drag" ).css ({"top": y, "left": x });
}
}). Mouseup (function (){
Move = false;
});

E. pageX and e. pageY are the horizontal and vertical coordinates of the current mouse.

You can give it a try on your own to get a clearer idea ~