jquery_jqueryに基づいてマウスで移動可能なdivを描画します-jsチュートリアル-php.cn

html ペイコード:

ペイコードペイコード次のように:

四角形を描画

描いてください!

css代：

复制代代码如下:

 
 body 
{ 
font-family: "Helvetica Neue"、"Lucida Grande"、"Segoe UI"、Arial、Helvetica、Verdana、サンセリフ; 
マージン: 0px; 
} 
#header 
{ 
width:150px; 
マージン:0px 自動; 
} 
#header label 
{ 
font-size:45px; 
フォントの太さ:太字; 
} 
#content 
{ 
幅:90%; 
高さ:600ピクセル; 
マージン:10px 自動; 
ボーダー:1px 青一色; 
} 
.new_rect 
{ 
不透明度: 0.7; 
-moz-不透明度: 0.7; 
フィルター: alpha(opacity=70); 
-ms-filter: alpha(opacity=70); 
背景:#A8CAEC; 
ボーダー:1px ソリッド #3399FF; 
位置:固定; 
浮動小数点:左; 
} 
.new_rect:hover{ 
cursor:move; 
} 
.mousedown{ 
-webkit-box-shadow:5px 5px 5px black; 
-moz-box-shadow:5px 5px 5px 黒; 
box-shadow:5px 5px 5px 黒; 
z-インデックス:999; 
} 

js代記入：

复制代記入代記入如下:

////////////////////////////////////////// /// /////////////// 
$(function () { 
//$("div[title=new_rect]").click(function(){ alert("click ");}); 
//$(".new_rect").draggable(); 
drow_rect("#content") 
//// //// //////////////////////////////////////////// ////// 
function drow_rect(the_id){//theid はキャンバスとして使用されるレイヤーを表します 
var num=1; 
var new_width= 0,new_height=0; 
var x_original=0,y_original=0; 
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; 
original_flag=false; に記録します。 
}; 
var MouseMove=function(e){ 
if(down_flag){//
x_down=e.pageX; 
y_down=e.pageY; >x_point=x_original; 
new_width=x_down-x_original; 
if(new_widthnew_width=-new_width; ; 
} 
new_height =y_down-y_original; 
if(new_heightnew_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(); ']").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 ; 
 
インスタンス イメージをアップロードします: 