jquery_jquery를 기반으로 마우스로 이동 가능한 div 그리기-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 17:50:13

원래의

1175명이 탐색했습니다.

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

<머리> 
직사각형 그리기

<본문> 

<라벨>그리기!

css代码:

复代码代码如下:

 
 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; 
} 

js代码:

复代码代码如下:

////////////////////////////////////////// /// ////////////// 
$(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="< ;/div>"; 
$(the_id).append(append_string); 
} 
} 
$(the_id).bind("mousedown",MouseDown ); 
$(the_id ).bind("mousemove",MouseMove);//이벤트 바인딩
$(the_id).mouseup(function(e){//마우스 왼쪽 버튼을 놓고 플래그를 초기화합니다. 🎜>down_flag=false; 
original_flag=true; 
$("div[name='" num "']").draggable() 
$("div[name='" num " ']").mousedown( function(){ 
$(this).addClass("mousedown");//그림자 추가 
$(the_id).unbind("mousedown",MouseDown); 
 $(the_id).unbind( "mousemove",MouseMove);//이벤트 바인딩 취소 
}) 
$("div[name='" num "']").mouseup(function(){ 
$(this ).removeClass("mousedown");//그림자 제거
$(the_id).bind("mousedown",MouseDown) 
$(the_id).bind("mousemove", MouseMove);//이벤트 바인딩 
}); 
num ; 
}) 
} 

 
인스턴스 이미지 업로드: 