まず第一に、あなたは主に左クリック良いマウスイベントハンドラメソッド、マウスなどの方法を移動し、左ボタンを離し設計する必要があり
DrawRectgle（左上隅、右下隅：四角形を描画、どのような内容な方法を理解するために、第二に、設計法を）など）を除去既に描画された矩形を入れ、このメソッドが呼び出されたときに決定する（または左上に基づいて、右下の座標を、矩形のサイズを変更するので、元の矩形を削除しません
マウスの左ボタンダウンイベントでは、マウスの位置を取得し、左コーナーのために保存し、フラグの開始を設定するために四角形を描画し
、マウスの左ボタンのポップアップイベントでは、復旧計画の矩形フラグがfalse
のマウスモーションイベントでは、決定することが必要です同じ時間も押した場合は、マウスの左ボタンを押すと、フラグは、あなたがマウスの位置を真の取得された四角形を描画し、機会に左にマウスを移動するために（右下隅の座標のために保存し、交流を左上、右下の位置を取るかどうか）、その後、四角形を描きます
// CSS部分 #canvas { 背景色：#AAAAAA。 位置：相対; 背景サイズ：100％100％。 ボーダー：2ピクセルソリッドブルー; } #canvas> DIV { ボーダー：2ピクセル緑色固体。 位置：絶対; 背景色：#eaeaea。 } #canvas> div>スパン{ 位置：絶対。 トップ：50％; 左：50％; 変換：（-50％、-50％）を変換。 フォントファミリ：simsun。 フォントサイズ：9PT。 } // htmlの部分 < div要素のid = "キャンバス" スタイル= "幅：850px;高さ：477px" > </ DIV > // JS部 VAR canvasWidth = 850; VARのcanvasHeight = 477; VAR = allDivNum 1; CanvasExt = { のdrawRect：機能（キャンバス）{//パラメータcanvas--ブロック材料は、エリア塗装 = VARこのこと; //キャンバス矩形枠 VAR canvasRect = canvas.getBoundingClientRect（）; 矩形枠//の左上座標 ; VAR canvasLeft = canvasRect.left VAR = canvasTop canvasRect.top; VARのX 0 =; VAR Y = 0; //プレスマウスのクリックイベント、描画準備 $（文書）.on（ 'マウスダウン '、 '#canvas'、機能（e）の{ //ボックス及び他の材料はすでに、変更、削除し、新しいIDが重複している解決存在 ' + ID、{ アクション：[{ ）するvar日=新しい日付を（getTimeを （）; ID = VAR "ますnewDiv" + DATE +のparseInt（Math.random（）* 10）; VARのdivEle = ""; //マウスのXY配置 X = e.clientX - canvasLeft; Y = e.clientY - canvasTop。 // DIV作成 divEle =のdocument.createElement（ 'DIVを'）; divEle.setAttribute（ "ID"、ID）; canvas.append（divEle） divEle.style.top = Y + "PX"; divEle.style.left = + X "PX"; //バインド削除 VAR = MENU新しい新しいBootstrapMenu（ '＃' + ID、{ 名：「削除ブロックのショー onClick：関数（）{ デル（ID）; } }] }）; VARのTX = 0; VAR TY = 0; VARのTWIDTH = 0; VARのtheight = 0; //ドラッグ操作の追加 divEle.onmousedown =関数（E）{ e.stopPropagationを（ ）; //バブリング防ぐために時間 VAR divEleRect this.getBoundingClientRect =（）; VAR = e.clientX divEleLeft - divEleRect.left; VAR = e.clientY divEleTop - divEleRect.top; this.onmousemove =関数（E）{ e.stopPropagation（）。 TX = e.clientX - canvasLeft - divEleLeft; TY = e.clientY - canvasTop - divEleTop; //オブジェクトの現在の幅と高さ検索 .style.width ,;介しTWIDTH =のdocument.getElementById（ID）を TWIDTH parseInt =（TWIDTH）; theight =のdocument.getElementById（ID）.style.heightは、 theightはのparseInt（theightを）=; //境界検出 IF（TX < = 0 ）{ TX = 0; this.style.left = 0+ "PX"。 }そうであれば（TX + twidth > canvasWidth）{ TX = canvasWidth - twidth。 this.style.left =（canvasWidth - twidth）+ "PX"。 }他{ this.style.left = TX + "PX"。 } IF（TY < = 0 ）{ TY = 0。 this.style.top = 0 + "PX"。 }それ以外の場合（（TY + theight）> this.style.top =（canvasHeight - theight）+ "PX"。 }他{ this.style.top = TY + "PX"。 } } this.onmouseup =関数（E）{ VARのID = $（この）.ATTR（ "ID"）。 e.stopPropagation（）; this.onmousemove = NULL; } }。 //鼠标移动事件、画图 VAR幅= 0; VaRの高さ= 0; canvas.onmousemove =関数（E）{ e.stopPropagation（）。 //幅高さの差は、マウスの開始位置からマウスの移動の終わりにある ; - canvasLeft - X幅= e.clientX = e.clientY高- canvasTop - Y; divEle.style.width +幅= "PX"; divEle.style.height +高さ= "PX"; VAR = e.clientX TW - canvasLeft; VARのe.clientY = TH - canvasTop; IF（TW> =（のparseInt（canvasWidth）-7）|| TH> = （のparseInt（canvasHeight）-7））{//解析を容易にするために、キャンバス3px未満 ++ allDivNumと、 divEle.innerHTML = " < スパン>創造的なブロック"allDivNum + +"「; キャンバス。れるonmousemove = NULL;</ スパン> canvas.onmouseup = NULL; 返します。 } } canvas.onmouseup =関数（E）{ IF（幅< 10 ||高さ<10）{ canvas.removeChild（divEle）。 }他{ allDivNum ++。 divEle.innerHTML = "<スパン>素材框" + allDivNum + "</スパン> "。 } e.stopPropagation（）。 canvas.onmousemove = NULL; } }）。 } }。 window.onload =関数（）{ VARキャンバス=のdocument.getElementById（ "キャンバス"）; CanvasExt.drawRect（キャンバス）; //右クリックイベントのデフォルトをキャンセル document.oncontextmenu =関数（e）を{ e.preventDefault（）; } };
----------------
免責事項：この記事はCSDNブロガー「tangdou369098655の元記事である、CC 4.0 BY-SAの著作権契約、複製、元のソースのリンクと、この文を添付してくださいに従ってください。 。
オリジナルリンクします。https：//blog.csdn.net/tangdou369098655/article/details/100677663