Draw a movable div with the mouse based on jquery

Draw a movable div with the mouse based on jquery_jquery

WBOY

Release： 2016-05-16 17:50:13

Original

1169 people have browsed it

具体的原理我就不多说了，直接贴代码。
html代码：

复制代码代码如下:

Draw rectangle

css代码：

复制代码代码如下:

 
body 
{ 
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif; 
margin: 0px; 
} 
#header 
{ 
width:150px; 
margin:0px auto; 
} 
#header label 
{ 
font-size:45px; 
font-weight:bolder; 
} 
#content 
{ 
width:90%; 
height:600px; 
margin:10px auto; 
border:1px solid blue; 
} 
.new_rect 
{ 
opacity: 0.7; 
-moz-opacity: 0.7; 
filter: alpha(opacity=70); 
-ms-filter: alpha(opacity=70); 
background:#A8CAEC; 
border:1px solid #3399FF; 
position:fixed; 
float:left; 
} 
.new_rect:hover{ 
cursor:move; 
} 
.mousedown{ 
-webkit-box-shadow:5px 5px 5px black; 
-moz-box-shadow:5px 5px 5px black; 
box-shadow:5px 5px 5px black; 
z-index:999; 
} 

js代码：

复制代码代码如下:

/////////////////////////////////////////////// ///////////////
$(function () {
//$("div[title=new_rect]").click(function(){alert("click ");});
//$(".new_rect").draggable();
drow_rect("#content");
})
//////// ////////////////////////////////////////////////////
function drow_rect(the_id){//theid represents the layer used as canvas
var num=1;
var x_down=0,y_down=0;
var new_width=0,new_height=0;
var x_original=0,y_original=0;
var original_flag=true,down_flag=false;
var x_point=0,y_point=0;
var append_string;
var MouseDown=function(e ){
down_flag=true;
x_down=e.pageX;
y_down=e.pageY;//Record the current coordinates of the mouse
if(original_flag){//If it is the first click , record the coordinates of the starting point into x_original and y_original
x_original=e.pageX;
y_original=e.pageY;
original_flag=false;
}
};
var MouseMove=function(e){
if(down_flag){//The mouse has moved
x_down=e.pageX;
y_down=e.pageY;
x_point=x_original;
y_point= y_original;
new_width=x_down-x_original;
if(new_width<0){//mouse moves left
new_width=-new_width;
x_point=x_down;
}
new_height =y_down-y_original;
if(new_height<0){ //Mouse the mouse to the right
new_height=-new_height;
y_point=y_down;
}
$("div[name= '" num "']").remove();//Delete the previous layer and generate a new layer in the following code
append_string="

< ;/div>";
$(the_id).append(append_string);
}
}
$(the_id).bind("mousedown",MouseDown);
$(the_id ).bind("mousemove",MouseMove);//Event binding
$(the_id).mouseup(function(e){//Release the left mouse button, initialize the flag
down_flag=false;
original_flag=true;
$("div[name='" num "']").draggable();
$("div[name='" num "']").mousedown( function(){
$(this).addClass("mousedown");//Add shadow
$(the_id).unbind("mousedown",MouseDown);
$(the_id).unbind( "mousemove",MouseMove);//Cancel event binding
});
$("div[name='" num "']").mouseup(function(){
$(this ).removeClass("mousedown");//Remove shadow
$(the_id).bind("mousedown",MouseDown);
$(the_id).bind("mousemove",MouseMove);//Event Binding
});
num ;
});
}

Upload an instance image:
Draw a movable div with the mouse based on jquery_jquery