js implementiert die Wiedergabe-Drag-and-Drop-Trajektorienanalyse aus den Fähigkeiten von „process_javascript“.

Ich bin heute ein wenig zufrieden. Der csdn-Blog hat in der Vergangenheit noch nie so viele Aufrufe gehabt, ich muss sagen, dass er immer noch etwas anmaßend ist. Ich bin froh, diese Ermutigungen zu sehen. Zumindest gibt mir das das Gefühl, ein Insider zu sein, und ich bin nicht allein.

Lassen Sie uns ohne weitere Umschweife mit der heutigen Aufnahme fortfahren, die Drag-Spuren der Wiedergabe aufzeichnen und zunächst den Vorgang analysieren:

1. Um Drag-Spuren abzuspielen, müssen Sie zuerst

aufnehmen

2. Um Drag-Traces aufzuzeichnen, muss Drag implementiert werden;

Dieses Problem wurde vor ein paar Tagen gelöst und die Implementierung war leicht fehlerhaft, aber die allgemeine Implementierungsmethode ist bereits klar, sodass die Implementierung dieses Problems heute viel schneller ist und ich jetzt wirklich zufrieden bin Wenn ich es heute noch einmal umsetze, ist mein Verständnis etwas tiefer, also werde ich es heute noch einmal aufzeichnen

Was die Aufzeichnung von Widerstandsspuren betrifft, wird diese Analyse eine lange Geschichte sein, schließlich wurde sie einmal durchgeführt:

1. Bestimmen Sie die Position und den Status des aktuellen Div, um absolutes Ziehen sicherzustellen

2. Überwachen Sie Mausziehereignisse (mehrere Mausereignisse gestern zusammengefasst);

3. Führen Sie entsprechende Reaktionen gemäß den entsprechenden Mausereignissen durch und zeichnen Sie die vorhandenen Punkte des Div während des Ziehens mit der Maus auf

4. Überwachen Sie das Maussprungereignis, um die Aufzeichnung von Ziehereignissen und Punkten zu beenden

Implementieren wir zunächst den Code (hier werden alle Codes gleichzeitig aufgelistet und später einzeln analysiert):

HTML-Sprache:

Javascript-Teil:

<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>//这个是来回放的

Eine kurze Zusammenfassung der wichtigsten Punkte, die Aufmerksamkeit erfordern:

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-Positionsarray, eine Sammlung von Punkten: Dieser Punkt ist der Bewegungspunkt der oberen linken Ecke des Div. Das heißt, die Bewegungsspur, die wir aufzeichnen, ist tatsächlich eine Sammlung von Punkten in der oberen linken Ecke des div. OffsetLeft ist die x-Koordinate. OffsetTop ist die y-Koordinate

2. Mehrere Längen oder Abstände, die im Programm erscheinen: offsetLeft, clientX, offsetWidth, style.left, document.documentElement.clientWidth usw.;

3. push()-Methode: Elemente am Ende des Arrays hinzufügen, die Länge des Arrays ändern

4. Pop()-Methode: Löschen Sie das letzte Element und geben Sie es zurück. Der andere: Löschen Sie das Element und die Array-Länge wird kleiner

Auf diese Weise haben wir das Implementierungsprinzip implementiert. Wenn wir vorwärts abspielen, müssen wir versuchen, ihn zu schreiben.

Ich muss sagen, dass es immer noch bequemer ist, mit der Maus zu ziehen. Es ist zu umständlich, mit der Maus zu ziehen ... Das Wetter ist untergegangen und es ist heiß, aber heute ist nicht schlecht...