jquery_jquery를 기반으로 마우스로 이동 가능한 div 그리기

<머리>











<본문>

body
{
글꼴 계열: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
여백: 0px;
}
#헤더
{
너비:150px;
여백:0px 자동;
}
#헤더 라벨
{
글꼴 크기:45px;
글꼴 두께:굵게;
}
#content
{
너비:90%;
높이:600px;
여백:10px 자동;
테두리: 1px 단색 파란색;
}
.new_ect
{
불투명도: 0.7;
-moz-불투명도: 0.7;
필터: 알파(불투명도=70);
-ms-filter: 알파(불투명도=70);
배경:#A8CAEC;
테두리:1px 솔리드 #3399FF;
위치:고정;
플로트:왼쪽;
}
.new_ect:hover{
커서:이동;
}
.mousedown{
-webkit-box-shadow:5px 5px 5px 검정;
-moz-box-shadow:5px 5px 5px 검정;
box-shadow:5px 5px 5px 검정;
z-색인:999;
}

////////////////////////////////////////// /// //////////////
$(function () {
//$("div[title=new_ect]").click(function(){ Alert("클릭");});
//$(".new_lect").draggable()
drow_ect("#content")
}; //// ///////////////////////////////////////////// //////
drow_ect(the_id){//theid는 캔버스로 사용되는 레이어를 나타냅니다.
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 MouseDown=function(e ){
down_flag=true;
x_down=e.pageX;
y_down=e.pageY;//마우스의 현재 좌표를 기록합니다.
if(original_flag) {//첫 번째 클릭인 경우 시작점의 좌표를 x_original 및 y_original
x_original=e.pageX;
y_original=e.pageY;
original_flag=false;
};
var MouseMove=function(e){
if(down_flag){//마우스가 이동했습니다.
x_down=e.pageX;
y_down=e.pageY; >x_point=x_original;
y_point= y_original;
if(new_width<0){//마우스가 왼쪽으로 이동
x_point=x_down; ;
}
new_height =y_down-y_original;
if(new_height<0){ //마우스를 오른쪽으로 이동
new_height=-new_height; }
$("div[name= '" num "']").remove();//다음 코드에서 이전 레이어를 삭제하고 새 레이어를 생성합니다
append_string="