jQuery drag and drop div implementation ideas_jquery

The idea is to use jquery's three events of mousemove, mousedown, and mouseup to define two relative positions, namely

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

2. Where the mouse is Coordinates relative to the upper left corner of the component.

The specific functions are as follows:

Copy code The code is as follows:

.drag{
position:absolute;
background:#0000CC;
top:100px;left:200px;
padding:0;
}

Copy code The code is as follows:

$(document).ready(function(){
var move=false;//Move mark
var _x,_y;//The relative position of the mouse from 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;//Control upper left The relative position from the corner to the upper left corner of the screen
var y=e.pageY-_y;
$(".drag").css({"top":y,"left":x});
}
}).mouseup(function(){
move=false;
});

where e.pageX, e.pageY are the horizontal and vertical directions of the current mouse Coordinates.

Try it yourself and your ideas will become clearer~