Je suis un peu heureux aujourd'hui. Le blog CSDN compte plus de 10 000 vues. Je n'ai jamais eu un nombre aussi élevé de vues dans le passé. Je dois dire que je suis encore un peu prétentieux trop souvent, mais je ne peux toujours pas m'empêcher d'être heureux quand je vois ces encouragements. Au moins, cela me fait me sentir comme une personne dans l'industrie. Je ne suis pas seul.
Sans plus tarder, continuez l'enregistrement d'aujourd'hui, enregistrez les marques de glisser-déménagement et analysez-la à partir du processus:
1. Pour rejouer les marques de glisser, vous devez d'abord les enregistrer;
2. Pour enregistrer des traces de glisser, la traînée doit être implémentée;
Ce problème a été fait il y a quelques jours, et il a été légèrement défectueux à ce moment-là, mais la méthode de mise en œuvre générale était claire, alors aujourd'hui, j'ai réalisé ce problème beaucoup plus rapidement. J'étais vraiment heureux. Après l'avoir réalisé à nouveau aujourd'hui, je l'ai compris un peu plus profondément, donc je vais l'enregistrer aujourd'hui;
Quant à l'enregistrement des traces de traînée, cette analyse sera courte, après tout, je l'ai fait une fois:
1. Déterminez la position actuelle et l'état de la div pour s'assurer que absolu peut être utilisé pour faire glisser;
2. Écoutez les événements de glisser de souris (plusieurs événements de souris résumés hier);
3. Faites une réponse correspondante basée sur l'événement de souris correspondant et enregistrez les points où le div existe dans la traînée et la chute de Onmousemove;
4. Écoutez l'événement de rebond de souris pour mettre fin à l'événement de drag et à l'enregistrement de point
Quoi qu'il en soit, implémentons d'abord le code suivant (tous les codes sont répertoriés ici en même temps et analysés un par un plus tard):
Langue HTML:
<div id = "showZone"> </div> // Ceci est toujours si familier <a href = "#" style = "position: absolu; margin-top: 100px; couleur: jaune; background-Color: Red;"> reback </a> // Ceci est joué à part entière à part entière
Partie javascript:
window.onload = function () {var obj = document.getElementyId ("showZone"); var disx = disy = 0; var dragif = false; var position = [{x: obj.offsetleft, y: obj.offsettop}]; // c'est la clé de la mise en œuvre de l'enregistrement et de la lecture, et les autres obtiennent tous des éléments de base var oa = document.getElementsByTagName ("a") [0]; obj.onmousedown = function (event) {var event = event || window.event; disx = event.clientx-obj.offsetleft; // la distance de la souris à la bordure div disy = event.clienty-obj.offsettop; dragif = true; // the flag position.push ({x: obj.offsetleft, y: obj.offsetTop}); // L'enregistrement commence à partir de ce temps return false; }; Document.OnMouSEMOVE = fonction (événement) {if (! Dragif) return; // Ce jugement est extrêmement important, seul le mouvement pressé peut être valide var event = event || window.event; var nowx = event.clientx-disx; // Selon la distance de la souris enregistrée ci-dessus à la div, vous pouvez connaître la distance de la div à la page Web var nowy = event.clienty-disy; var maxx = document.DocumentElement.ClientWidth-OBJ.OffsetWidth; // Ceci est OffsetWidth, qui est la largeur de la div, et non offSetleft var maxy = document.DocumentElement.ClientHeight-Obj.offsetheight; NOWX = NOWX <0? 0: NOWX; // ces jugements sont juste pour juger qu'il n'y a pas de frontière maintenant = maintenant <0? 0: maintenant; NowX = NowX> Maxx? Maxx: NowX; Nowy = Nowy> Maxy? Maxy: Nowy; obj.style.margintop = obj.style.marginleft = 0; obj.style.left = nowx + "px"; // n'oubliez pas + "px", seul style.left / top est obj.style.style.top = nowy + "px" avec "px"; position.push ({x: nowx, y: nowy}); // enregistre obj.innerhtml = "x:" + maintenantx + "y:" + nowy; // voir les modifications renvoient intuitivement false; }; document.onMouseUp = function () {dragif = false; // glisser et enregistrer obj.innerhtml = "x:" + obj.offsetleft + "y:" + obj.offsettop; }; oa.onclick = function () {if (position.length == 1) return; // Lorsqu'il n'y a qu'un, cela signifie que le temporisateur var n'est pas déplacé. = setInterval (function () {var opos = position.pop (); opos? (obj.style.left = opos.x + "px", obj.style.top = opos.y + "px"): clearInterval (timer); // un autre étonné par cette écriture}, 30); retourne false; }; };Quelques points clés auxquels faire attention:
1. Var Position Tableau, ensemble de points: Ce point est le point mobile dans le coin supérieur gauche de la div, c'est-à-dire que la trajectoire de mouvement que nous enregistrons est en fait l'ensemble des points dans le coin supérieur gauche de la div, offseft est la coordonnée x, offsetop est la coordonnée y, vous savez comment dessiner cet axe de coordonnées;
2. Plusieurs longueurs ou distances apparaissant 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 et fin;
4. Méthode POP (): Supprimer et retourner le dernier élément du tableau. Il y a deux points clés, un: retournez le dernier élément; L'autre: supprimez l'élément et la longueur du tableau devient plus petite;
De cette façon, nous avons réalisé la lecture arrière, il n'est donc pas nécessaire de mentionner le principe de mise en œuvre. Si nous avons la lecture directe, devrions-nous obtenir et supprimer la première valeur du tableau? Haha, essayez de l'écrire et de le lire.
Je dois dire qu'il est plus confortable de traîner avec la souris. Il est trop gênant de déplacer le clavier. Vous pouvez glisser et traîner avec la souris sans scrupules ... le ciel est déjà dans un étourdissement et il va être chaud, mais aujourd'hui c'est bien ...