Aujourd'hui, nous résoudrons quelques problèmes dans le prototype de la dernière traînée. Voyons quels sont les problèmes?
J'ai joint le code JavaScript du numéro précédent pour faciliter tout le monde pour afficher le problème.
<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; disx = oevent.clientx - odiv.offsetLeft; disy = oevent.clienty - odiv.offsetTop; odiv.onmousemove = function (ev) {var oevent = ev || événement; odiv.style.left = oevent.clientx - disx + 'px'; odiv.style.top = oevent.clienty - disy + 'px'; }; odiv.onmouseup = function () {odiv.onmousemove = null; odiv.onmouseup = null; }; }; }; </cript>1. Si ma souris se déplace plus vite maintenant, vous constaterez que la souris sort de cette div, et la div ne suivra pas la souris pour le moment.
Alors pourquoi ce problème se produit-il?
La raison est en fait très simple. Nous ajoutons l'événement MouseMove au div, donc une fois que la souris s'écarte de la div, Mousemove ne sera plus déclenché à ce moment.
Solution: L'événement se charge sur le document, car votre souris est toujours dans la page quoi qu'il arrive, Mousemove sera déclenché quoi qu'il arrive, donc il sera rapide.
Ensuite, nous modifions le code en conséquence.
<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; disx = oevent.clientx - odiv.offsetLeft; disy = oevent.clienty - odiv.offsetTop; // sur le document de chargement de l'événement. événement; odiv.style.left = oevent.clientx - disx + 'px'; odiv.style.top = oevent.clienty - disy + 'px'; }; odiv.onmouseup = function () {document.onMouseMove = null; odiv.onmouseup = null; }; }; }; </cript>Ensuite, ce problème peut être résolu.
2. Voyons quels problèmes sont toujours là. Bien que le problème de traîner rapidement ait été résolu, lorsque j'ai déplacé la souris vers cette position
Maintenant, vous pouvez clairement voir que la souris n'est pas sur la div. Si vous soulevez la souris pour le moment, vous pouvez voir qu'elle bougera après votre retour. C'est un autre bug!
En fait, cette question est la même que celle ci-dessus. C'est donc très simple à résoudre, ajoutons Mouseup au document, essayons-le
document.onMouseUp = function () {document.onMouseMove = null; document.onmouseUp = null; };De cette façon, si vous passez à la position que vous venez de maintenant, il n'y aura pas de bogue précédent, et il n'y aura pas de problème à déplacer rapidement. Tout est normal.
3. Jetons un coup d'œil aux problèmes de compatibilité du navigateur
En fait, il y a un tel problème dans la version inférieure du navigateur Firefox
. Comment est-ce arrivé? Lorsque vous faites glisser la première fois, c'est juste. Lorsque vous le faites glisser une fois, appuyez et maintenez-le et déplacez-le, vous constaterez qu'il y aura une ombre derrière. Que se passe-t-il avec ça?
En fait, le Firefox que nous faisons glisser maintenant est buggy. Et si nous ajoutons du contenu au div
Vous constaterez qu'il n'y a plus de problème maintenant.
Ainsi, le bug de Firefox n'apparaît que dans la div vide.
Solution:
En fait, c'est très simple. Nous avons juste besoin de bloquer l'événement par défaut du navigateur et de retourner false; à Onmoudown. Pourquoi l'ajouter à Onmoudown?
Vous pouvez penser à quel événement commence la traînée? Cela commence par Onmoudown. Lorsque la souris est enfoncée, la traînée commence. Vous devez donc charger sur onmoudown.
En fait, il vient d'ajouter un rendement de la phrase faux; bloqué le bug de Firefox.
De cette façon, peu importe comment vous retardez, il n'y aura aucun problème.
Code joint:
<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; disx = oevent.clientx - odiv.offsetLeft; disy = oevent.clienty - odiv.offsetTop; // sur le document de chargement de l'événement. événement; odiv.style.left = oevent.clientx - disx + 'px'; odiv.style.top = oevent.clienty - disy + 'px'; }; document.onMouseUp = function () {document.onMouseMove = null; document.onmouseUp = null; }; retourne false; }; }; </cript>Le programme est maintenant terminé, mais il y a encore des problèmes avec l'expérience utilisateur.
Par exemple, si un utilisateur peut faire glisser ce div du navigateur, comment peut-il le résoudre?
Ensuite, nous ajoutons un jugement. C'est très simple, si vous sortez de la gauche
, c'est directement égal à 0, et il ne peut pas sortir de la gauche. Alors la même chose est vraie ci-dessus.
Alors, comment pouvons-nous nous empêcher de sortir de la droite? ? Dessinez simplement une image et précisiez-le. En fait, nous pouvons le calculer en soustrayant la largeur visuelle de la page du div.
Ensuite, c'est la valeur dite maximale. Just juge si la distance déplacée dépasse cette valeur maximale, elle est égale à cette valeur maximale. Alors ce qui suit est le même.
Joignez le code complet:
<script type = "text / javascript"> // glisser et déposer la div vide. La version basse de Firefox a Bug Window.onLoad = function () {var odIv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || événement; disx = oevent.clientx - odiv.offsetLeft; disy = oevent.clienty - odiv.offsetTop; document.onmousemove = function (ev) {var oevent = ev || événement; // Stockez l'emplacement actuel du div var odivleft = oevent.clientx - disx; var odIvtop = oevent.clienty - disy; // traîne à partir de la gauche if (odIvleft <0) {odIvleft = 0; } else if (odivleft> document.documentElement.clientWidth - odiv.offsetwidth) {odIvleft = document.DocumentElement.ClientWidth - odiv.offsetWidth; } if (odIvTop <0) {odivtop = 0; } else if (odivtop> document.DocumentElement.ClientHeight - odiv.offsetHeight) {odivtop = document.documentElement.clientHeight - odiv.offsetheight; } odiv.style.left = odIvleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onMouseUp = function () {document.onMouseMove = null; document.onmouseUp = null; }; retourne false; // bloque l'événement par défaut et résoudre le bug de firefox}; }; </cript>Ensuite, la traînée est plus complète maintenant. O (∩_∩) o