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

具体的原理我就不多说了，直接贴代码。
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 ;
})
}


인스턴스 이미지 업로드:

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.