js implémente l'analyse de la trajectoire de lecture par glisser-déposer à partir des compétences process_javascript

Je suis un peu content aujourd'hui. Le blog csdn compte plus de 10 000 vues par le passé, je dois dire que c'est encore un peu prétentieux, mais je peux. Je ne peux m'empêcher d'être heureux de voir ces encouragements. Ah, au moins, cela me donne le sentiment d'être un initié, et je ne suis pas seul.

Sans plus tarder, poursuivons l'enregistrement d'aujourd'hui, enregistrons les traces de glissement de lecture et analysons d'abord le processus :

1. Pour lire les traces de glisser, vous devez d'abord enregistrer

2. Pour enregistrer des traces de glisser, le glisser doit être implémenté

;

Ce problème a été résolu il y a quelques jours, et la mise en œuvre était légèrement défectueuse, mais la méthode générale de mise en œuvre est déjà claire, donc aujourd'hui la vitesse de mise en œuvre de ce problème est beaucoup plus rapide, et je suis vraiment content maintenant, après. en le mettant à nouveau en œuvre aujourd'hui, ma compréhension est un peu plus profonde, je vais donc l'enregistrer à nouveau aujourd'hui

;

Quant à l'enregistrement des traces de traînée, cette analyse sera courte. Après tout, elle a été faite une fois :

1. Déterminez la position et l'état du div actuel pour garantir un glissement absolu ;

2. Surveiller les événements de glissement de la souris (plusieurs événements de souris résumés hier) ;

3. Faites les réponses correspondantes en fonction des événements de souris correspondants et enregistrez les points existants du div lors du déplacement de la souris

4. Surveillez l'événement de rebond de la souris pour terminer l'enregistrement des événements et des points de glisser

Implémentons d'abord le code (tous les codes sont répertoriés ici en même temps, et analysés un par un plus tard) :

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

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

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; 
}; 
};

Un bref résumé des points clés qui nécessitent une attention :

1. Tableau de positions Var, une collection de points : ce point est le point mobile du coin supérieur gauche du div. C'est-à-dire que la trace de mouvement que nous enregistrons est en fait une collection de points dans le coin supérieur gauche. du div. OffsetLeft est la coordonnée x. offsetTop est la coordonnée y. Savez-vous comment dessiner cet axe de coordonnées ?

2. Plusieurs longueurs ou distances qui apparaissent dans le programme : offsetLeft, clientX, offsetWidth, style.left, document.documentElement.clientWidth, etc.;

3. Méthode push() : ajouter des éléments à la fin du tableau, modifier la longueur du tableau, la fin

4. Méthode Pop() : supprime et renvoie le dernier élément du tableau. Il y a deux points clés : l'un : renvoie le dernier élément ; l'autre : supprime l'élément et la longueur du tableau devient plus petite ;

De cette façon, nous avons implémenté la lecture en arrière. Inutile de dire le principe d'implémentation. Si nous jouons en arrière, devons-nous obtenir et supprimer la première valeur du tableau Ha, essayez de l'écrire.

Je dois dire qu'il est quand même plus confortable de glisser avec la souris. C'est trop gênant de déplacer le clavier. On peut glisser sans retenue avec la souris... Le temps s'est installé et il fait chaud, mais aujourd'hui. c'est pas mal...