Le principe de traînée: en fait, la distance entre la souris et le coin supérieur gauche reste inchangée. Regardons l'image ci-dessous. Ce point rouge est la souris.
Le glisser-foyer signifie en fait calculer la position d'un objet à travers la position de la souris. C'est aussi simple et si volontaire. Alors, comment trouvez-vous cette distance? ?
La différence entre la position de la souris et la position de l'objet est cette distance, non? Ensuite, cette ligne diagonale est composée de lignes horizontales et verticales.
Voyons comment le programme est réalisé.
<div id = "div1"> </div>
En fait, ce qu'il a changé était le sommet gauche d'une div, puis il a commencé à bouger. Il doit y avoir un positionnement absolu de cette façon, non?
<style type = "text / css"> # div1 {width: 200px; hauteur: 200px; Contexte: rouge; Position: absolue; } </ style>Voici quelques étapes: 1. Appuyez sur la souris 2. Soulevez la souris 3. Déplacez la souris
<script type = "text / javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || événement; // Browser Compatible DISX = OEVENT.ClientX - ODIV.OffSetLeft; // La position horizontale est la position de la souris - la position du div disy = oevent.clienty - odiv.offsettop; }; odiv.onmousemove = function (ev) {var oevent = ev || événement; odiv.style.left = oevent.clientx - disx + 'px'; // Position actuelle de la souris -disx odiv.style.top = oevent.clienty - disy + 'px'; }; }; </cript>Parlez à l'image:
var odIvleft = oevent.clientx - disx; Le diagramme est très clair
Mouseup ne regardons pas quel est l'effet maintenant. .
Vous trouverez un phénomène très intéressant. Si je n'appuie pas sur la souris, je me suivrai. Pourquoi est-ce? ? ?
Jetons un coup d'œil à MouseMove: Personne en JavaScript ne stipule que vous devez appuyer sur la souris avant de commencer, non? Peu importe que vous appuyiez ou non sur la souris, cette MouseMove se produit tout le temps, donc le problème vient d'ici. Avant que la souris ne soit pressée, il ne devrait pas y avoir de réponse lorsque la souris se déplace dessus. Vous devez appuyer pour réagir.
Par conséquent, cette MouseMove ne doit pas être ajoutée dès son lancement, mais devrait attendre que la souris soit enfoncée, puis ajouter Mousemove pour voir le code modifié.
Soit dit en passant, Mouseup est ajouté et son rôle se reflète pour le moment. La fonction est odiv.onmousemove = null; supprimer l'événement de déménagement,
Sinon, lorsque votre souris est soulevée, l'objet vous suivra toujours. odiv.onmouseup = null; S'il ne reste plus de déchets, il sera inutile de soulever la souris.
Jetons un coup d'œil au code modifié:
<script type = "text / javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || événement; // Browser Compatible DISX = OEVENT.ClientX - ODIV.OffSetLeft; // La position horizontale est la position de la souris - la position du div disy = oevent.clienty - odiv.offsettop; odiv.onmousemove = function (ev) {var oevent = ev || événement; odiv.style.left = oevent.clientx - disx + 'px'; // Position actuelle de la souris -disx odiv.style.top = oevent.clienty - disy + 'px'; }; odiv.onmouseup = function () {odiv.onmousemove = null; odiv.onmouseup = null; // Il ne reste plus de déchets, il serait inutile de soulever la souris}; }; }; </cript>Maintenant, nous avons fait une simple traînée et une chute, bien sûr, il y a encore de petits problèmes à résoudre.
Mais quoi qu'il en soit, nous avons déjà un prototype de traînée. Nous résoudrons certains bogues un par un dans le prochain numéro.