Draw a movable div with the mouse based on jquery_jquery

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

复制代码 代码如下:

Draw!

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:

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn