js は、 process_javascript スキルからの再生ドラッグ アンド ドロップ軌跡分析を実装します。

今日は csdn ブログの閲覧数が 10,000 件を超えたことはありませんが、それでもちょっと大げさだと言わざるを得ません。ああ、少なくとも、これで私は内部関係者になったような気分になります。私は一人ではありません。

早速、今日の記録を続けて、再生ドラッグ トレースを記録し、まずプロセスを分析してみましょう:

1. ドラッグ トレースを再生するには、まず

を記録する必要があります。

2. ドラッグ トレースを記録するには、ドラッグを実装する必要があります。

この問題は数日前に解決されており、実装には若干の欠陥がありましたが、一般的な実装方法はすでに明確になっているため、今日この問題の実装速度が大幅に速くなり、本当に満足しています。今日も実践して少し理解が深まったので、今日も記録していきます

ドラッグ トレースの記録に関しては、この分析は簡単に言うと一度だけ行われています。

1. 絶対的なドラッグを確実にするために、現在の div の位置とステータスを決定します。

2. マウスのドラッグ イベントを監視します (昨日まとめたいくつかのマウス イベント)。

3. 対応するマウス イベントに従って対応する応答を作成し、onmousemove のドラッグ中に div の既存のポイントを記録します。

4. マウスのバウンス イベントを監視して、ドラッグ イベントとポイントの記録を終了します

まずコードを実装しましょう (すべてのコードがここに同時にリストされ、後で 1 つずつ分析されます):

HTML言語:

JavaScript 部分:

<div style="width: 50px;height: 50px;background-color: cyan;display: block;position: absolute;" id="showZone"></div>//这个还是那么熟悉啊 
<a href="#" style="position: absolute;margin-top: 100px;color: yellow;background-color: red;">reback</a>//这个是来回放的

注意が必要な重要なポイントの簡単な要約:

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;//可以进行拖拽的标志 

position.push({x:obj.offsetLeft,y:obj.offsetTop});//记录从这时候就开始了 
return false; 
}; 
document.onmousemove=function(event){ 

if(!dragIf)return;//这个判断极为重要，只有按下的移动才有效 
var event=event||window.event; 
var nowX=event.clientX-disX;//根据上面记录的鼠标相对div的距离就知道div相对网页的距离了吧 
var nowY=event.clientY-disY; 
var maxX=document.documentElement.clientWidth-obj.offsetWidth;//这里是offsetWidth，是div的宽度，不是offsetLeft 
var maxY=document.documentElement.clientHeight-obj.offsetHeight; 
nowX=nowX<0&#63;0:nowX;//这些判定，只是判断不要出了边界 
nowY=nowY<0&#63;0:nowY; 
nowX=nowX>maxX&#63;maxX:nowX; 
nowY=nowY>maxY&#63;maxY:nowY; 

obj.style.marginTop=obj.style.marginLeft=0; 
obj.style.left=nowX+"px";//不要忘记+“px”，只有style.left/top是有“px”的 
obj.style.top=nowY+"px"; 
position.push({x:nowX,y:nowY});//不停记录啊 
obj.innerHTML="X:"+nowX+"Y:"+nowY;//直观的看到变化 
return false; 
}; 
document.onmouseup=function(){ 
dragIf=false;//不允许再进行拖拽和记录了 
obj.innerHTML="X:"+obj.offsetLeft+"Y:"+obj.offsetTop; 
}; 
oa.onclick = function (){ 
if (position.length == 1) return;//只有一个的时候，说明并未移动 
var timer = setInterval(function (){ 
var oPos = position.pop(); 
oPos &#63; (obj.style.left = oPos.x + "px", obj.style.top = oPos.y + "px") : clearInterval(timer);//又被这个写法惊艳到 
}, 30); 
return false; 
}; 
};

1. Var 位置配列、点の集合: この点は div の左上隅の移動点です。つまり、記録する移動トラックは実際には左上隅の点の集合です。 div の OffsetLeft は x 座標、offsetTop はこの座標軸を描画する方法を知っていますか?

2. プログラムに表示されるいくつかの長さまたは距離: offsetLeft、clientX、offsetWidth、style.left、documentElement.clientWidth など;

3. Push() メソッド: 配列の末尾に要素を追加し、配列の長さを変更します。

4. Pop() メソッド: 配列の最後の要素を削除して返す 2 つのポイントがあります。もう 1 つは要素を削除すると配列の長さが小さくなります。

このようにして、逆方向再生を実装しました。実装原理は言うまでもありませんが、順方向に再生する場合は、配列の最初の値を取得して削除する必要がありますか。

やはりマウスでドラッグした方が快適と言わざるを得ませんが、キーボードを自由にドラッグできるのは不便すぎます… 天気も良くなり、暑いですね。悪くないよ...