今日は少し幸せです。 CSDNブログには10,000回以上のビューがあります。私は過去にこれほど多くの景色を眺めたことがありません。私はまだ少し頻繁に大げさであると言わざるを得ませんが、これらの励ましを見たとき、私はまだ幸せにならざるを得ません。少なくとも、これは私を業界の人のように感じさせます。私は一人ではありません。
これ以上苦労せずに、今日の録音を続け、リプレイのドラッグマークを記録し、プロセスから分析します。
1.ドラッグマークを再生するには、最初に記録する必要があります。
2。ドラッグトレースを記録するには、ドラッグを実装する必要があります。
この問題は数日前に行われ、その時点では少し欠陥がありましたが、一般的な実装方法は明らかでしたので、今日はこの問題をより速く気づきました。本当に幸せでした。今日再びそれを実現した後、私はそれをもう少し深く理解したので、今日それを記録します。
ドラッグトレースの記録に関しては、この分析は短くなります。結局のところ、私はそれを一度しました：
1. DIVの現在の位置とステータスを決定して、絶対を使用してドラッグできるようにします。
2。マウスドラッグイベントを聞いてください（昨日要約されたいくつかのマウスイベント）。
3.対応するマウスイベントに基づいて対応する応答を行い、divがonmousemoveドラッグアンドドロップに存在するポイントを記録します。
4。マウスバウンスイベントを聞いて、ドラッグイベントとポイントレコードを終了します
とにかく、最初に次のコードを実装しましょう（すべてのコードが同時にここにリストされ、後で1つずつ分析されます）：
HTML言語：
<div id = "showzone"> </div> //
JavaScriptパート：
window.onload = function（）{var obj = document.getElementById（ "showzone"）; var disx = disy = 0; var dragif = false; var position = [{x：obj.offsetLeft、y：obj.offsettop}]; //これは録音と再生を実装するための鍵であり、その他はすべて基本的な要素var oa = document.getelementsbytagname（ "a"）[0]を取得しています。 obj.onmousedown = function（event）{var event = event || window.event; disx = event.clientx-obj.offsetLeft; //マウスのdiv境界までの距離disy = event.clienty-obj.offsettop; dragif = true; // flag position.push（{x：obj.offsetLeft、y：obj.offsettop}）; //レコードはこの時点からfalseを返します。 }; document.onmouseMove = function（event）{if（！dragif）return; //この判断は非常に重要です。プレスされた動きのみが有効なvar event = event || window.event; var nowx = event.clientx-disx; //上記のマウスの距離によると、divのdivのWebページの距離を知ることができますvaryy = event.clienty-disy; var maxx = document.documentlement.clientwidth-obj.offsetwidth; //これはoffsetwidthであり、divの幅であり、offsetLeft var maxy = document.documentelement.clientheight-obj.offseith; nowx = nowx <0？0：nowx; //これらの判断は、境界がないことを判断するためだけです= nowy <0？0：nowy; nowx = nowx> maxx？maxx：nowx; nowy = nowy> maxy？maxy：nowy; obj.style.margintop = obj.style.marginleft = 0; obj.style.left = nowx+"px"; //忘れないでください+"px"、left/top is obj.style.style.top = nowy+"px" with "px"; position.push（{x：nowx、y：nowy}）; // record obj.innerhtml = "x："+nowx+"y："+nowy; //変更を直感的にfalseに戻す参照; }; document.onmouseup = function（）{dragif = false; // obj.innerhtml = "x："+obj.offsetleft+"y："+obj.offsettop; }; oa.onclick = function（）{if（position.length == 1）return; // 1つしかない場合、VARタイマーが移動されないことを意味します。 = setInterval（function（）{var opos = position.pop（）; opos？（obj.style.left = opos.x + "px"、obj.style.top = opos.y + "px"）：clearinterval（timer）; falseを返します。 }; };注意を払うためのいくつかの重要なポイント：
1。VAR位置配列、ポイントのセット：この点は、DIVの左上隅の移動ポイントです。つまり、記録する動きの軌跡は、実際にはDivの左上隅のポイントのセットです。オフセットレフトはX座標です。
2.プログラムに表示されるいくつかの長さまたは距離：offsetLeft、clientx、offsetWidth、style.Left、document.documentelement.clientWidthなど。
3。プッシュ（）メソッド：アレイの最後に要素を追加し、配列の長さを変更し、終了します。
4。POP（）メソッド：配列の最後の要素を削除して返します。 2つの重要なポイントがあります。1つは次のとおりです。最後の要素を返します。もう1つ：要素を削除すると、配列の長さが小さくなります。
このようにして、私たちは後方再生を実現したので、実装の原則に言及する必要はありません。直接再生がある場合、配列の最初の値を取得して削除する必要がありますか？ハハ、それを書いて読んでみてください。
マウスでドラッグする方が快適だと言わざるを得ません。キーボードを移動するのは不便です。マウスでドラッグしてドラッグできません...空はすでにぼんやりとしていて、暑くなるでしょうが、今日は大丈夫です...