Avec les changements des temps, l'importance de js se fait de plus en plus sentir. js peut non seulement créer des pages Web (comme le framework Ext), mais également créer des effets spéciaux Web. Ces effets spéciaux sont non seulement compatibles avec les PC, mais également compatibles. avec les téléphones mobiles Après tout, ils sont basés sur le navigateur n'a rien à voir avec la plateforme. Les applications système Windows8 de Microsoft peuvent désormais être développées à l'aide de js. Si vous avez le temps, vous pouvez l'essayer.
Passons maintenant au fait et parlons de l'implémentation js de Div déplaçable. Parlons d'abord de l'idée d'implémenter cette fonction :
1. Capturez l'événement mousedown du div souris
2. Capturez l'événement mousemove du document
3. Annuler l'événement
Alors regardons le code :
Copiez le code comme suit :
fonction Glisser(id) {
var $ = fonction (drapeau) {
return document.getElementById(drapeau);
}
$(id).onmousedown = fonction (e) {
var d = document ;
varpage = {
événement : fonction (evt) {
var ev = evt ||
retourner ev;
},
pageX : fonction (evt) {
var e = this.event(evt);
return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
},
pageY : fonction (evt) {
var e = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
layerX : fonction (evt) {
var e = this.event(evt);
retourner e.layerX || e.offsetX;
},
coucheY : fonction (evt) {
var e = this.event(evt);
return e.layerY || e.offsetY;
}
}
var x = page.layerX(e);
var y = page.layerY(e);
si (dv.setCapture) {
dv.setCapture();
}
sinon si (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = fonction (e) {
var tx = page.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px" ;
dv.style.top = ty + "px" ;
}
d.onmouseup = fonction () {
si (dv.releaseCapture) {
dv.releaseCapture();
}
sinon si (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
}
}
Analyse des codes :
1.
Obtenir un objet div
Copiez le code comme suit :
var $ = fonction (drapeau) {
return document.getElementById(drapeau);
}
2. Capturez l'événement mousedown du document :
Il y a ce bout de code dedans :
Copiez le code comme suit :
varpage = {
événement : fonction (evt) {
var ev = evt ||
retourner ev;
},
pageX : fonction (evt) {
var e = this.event(evt);
return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
},
pageY : fonction (evt) {
var e = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
layerX : fonction (evt) {
var e = this.event(evt);
retourner e.layerX || e.offsetX;
},
coucheY : fonction (evt) {
var e = this.event(evt);
return e.layerY || e.offsetY;
}
}
Parmi eux, event obtient l'événement de souris, pageX et pageY obtiennent les coordonnées de la souris, layerX et layerY obtiennent la distance entre la souris et la bordure div.
Il y a aussi un bout de code :
Copiez le code comme suit :
si (dv.setCapture) {
dv.setCapture();
}
sinon si (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
Il s'agit de capturer les événements MouseMove et MouseUp du div. Si vous ne connaissez pas tx, vous pouvez le vérifier en ligne.
3. Événements MouseMove et mouseUp du document :
Copiez le code comme suit :
d.onmousemove = fonction (e) {
var tx = page.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px" ;
dv.style.top = ty + "px" ;
}
d.onmouseup = fonction () {
si (dv.releaseCapture) {
dv.releaseCapture();
}
sinon si (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
Parmi eux, tx et ty sont les codes les plus importants, utilisés pour définir les coordonnées div.
Certaines personnes peuvent se demander pourquoi -x,-y ?
x, y obtiennent en fait la distance entre la souris et la bordure div, si elle n'est pas soustraite
Les coordonnées de la flèche de la souris sont les mêmes que les coordonnées x et y du div. Après le glissement, la position de la souris se déplacera vers le coin supérieur gauche. L'effet est qu'elle rebondira après le glissement.
Copiez le code comme suit :
si (dv.releaseCapture) {
dv.releaseCapture();
}
sinon si (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
Le code ci-dessus sert à annuler les événements onmousemove et onmouseup du document après le relâchement de la souris.
J'ai appris le js récemment et je partagerai mes nouvelles expériences avec vous à l'avenir. J'espère apprendre et progresser avec tout le monde.