Node.js는 process_javascript 기술에서 재생 드래그 앤 드롭 궤적 분석을 구현합니다.

오늘은 csdn 블로그 조회수가 10,000회를 넘은 게 조금 기쁩니다. 예전에는 조회수가 이렇게 높았던 적이 없었는데, 아직도 너무 가식적일 때가 많습니다. 이런 격려를 보면 기쁘지 않을 수 없습니다. 아, 적어도 저는 내부자가 된 듯한 느낌을 받습니다. 저는 혼자가 아닙니다.

더 이상 고민하지 말고 오늘의 녹음을 이어가며 재생 드래그 흔적을 녹음하고 먼저 프로세스를 분석해 보겠습니다.

1. 드래그 추적을 재생하려면 먼저 녹화해야 합니다.

2. 드래그 추적을 기록하려면 드래그를 구현해야 합니다.

이 문제는 며칠 전에 해결되었고 구현에 약간의 결함이 있었지만 일반적인 구현 방법은 이미 명확했기 때문에 오늘은 이 문제의 구현 속도가 훨씬 빨라지고 이제 정말 기쁩니다. 오늘 다시 구현하니 이해가 좀 더 깊어져서 오늘 다시 녹음해보겠습니다

드래그 추적 기록에 관한 분석은 결국 한 번 수행되었기 때문에 짧게 설명하겠습니다.

1. 절대 드래그를 보장하기 위해 현재 div의 위치와 상태를 결정합니다.

2. 마우스 끌기 이벤트 모니터링(어제 요약된 여러 마우스 이벤트)

3. 해당 마우스 이벤트에 따라 대응하고 onmousemove 드래그 중에 div의 기존 지점을 기록합니다.

4. 마우스 바운스 이벤트를 모니터링하여 드래그 이벤트 및 포인트 기록을 종료합니다

먼저 코드를 구현해 보겠습니다. (모든 코드는 여기에 동시에 나열되어 있으며 나중에 하나씩 분석됩니다.)

html 언어:

<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의 왼쪽 상단 모서리에 있는 이동 지점입니다. 즉, 우리가 기록하는 이동 트랙은 실제로 왼쪽 상단 모서리에 있는 포인트 모음입니다. OffsetLeft는 x 좌표이고, offsetTop은 y 좌표입니다.

2. 프로그램에 나타나는 여러 길이 또는 거리: offsetLeft, clientX, offsetWidth, style.left, document.documentElement.clientWidth 등;

3. push() 메서드: 배열의 끝에 요소를 추가하고, 배열의 길이를 변경합니다.

4. Pop() 메서드: 배열의 마지막 요소를 삭제하고 반환합니다. 하나는 마지막 요소를 반환하고, 다른 하나는 요소를 삭제하면 배열 길이가 작아지는 것입니다.

이런 식으로 역방향 재생을 구현했습니다. 구현 원리는 말할 필요도 없습니다. 순방향으로 재생하려면 배열의 첫 번째 값을 얻어서 삭제해야 합니까?

아직은 마우스로 드래그하는 게 더 편하다고 해야되나.. 키보드를 움직이는게 너무 불편하다 마우스로 제약없이 드래그할 수 있다... 날씨도 덥고 그런데 오늘은 나쁘지 않네요...