Com a mudança dos tempos, a importância do js é cada vez mais sentida. js pode não apenas fazer páginas da web (como o framework Ext), mas também fazer alguns efeitos especiais da web. Esses efeitos especiais não são apenas compatíveis com PCs, mas também compatíveis. Afinal, eles são baseados em O navegador não tem nada a ver com a plataforma. Agora, os aplicativos do sistema Windows 8 da Microsoft podem ser desenvolvidos usando js. Se tiver tempo, você pode tentar.
Agora vamos direto ao ponto e falar sobre como implementar Div arrastável em js. Para conseguir essa função, vamos primeiro falar sobre a ideia:
1. Capture o evento mousedown do div do mouse
2. Capture o evento mousemove do documento
3. Cancele o evento
Então vamos dar uma olhada no código:
Copie o código do código da seguinte forma:
função Arrastar(id) {
var $ = função (sinalizador) {
retornar document.getElementById(flag);
}
$(id).onmousedown = função (e) {
var d = documento;
var página = {
evento: função (evt) {
var ev = evt || janela.evento;
retornar ev;
},
páginaX: função (evt) {
var e = this.event(evt);
retornar e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
},
páginaY: função (evt) {
var e = this.event(evt);
retornar e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
camadaX: função (evt) {
var e = this.event(evt);
retornar e.layerX || e.offsetX;
},
camadaY: função (evt) {
var e = this.event(evt);
retornar e.camadaY || e.offsetY;
}
}
var x = página.layerX(e);
var y = página.layerY(e);
if (dv.setCapture) {
dv.setCapture();
}
senão if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = função (e) {
var tx = página.páginaX(e) - x;
var ty = página.páginaY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
}
d.onmouseup=função(){
if (dv.releaseCapture) {
dv.releaseCapture();
}
senão if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
}
}
Análise de código:
1.
Obtenha o objeto div
Copie o código do código da seguinte forma:
var $ = função (sinalizador) {
retornar document.getElementById(flag);
}
2. Capture o evento mousedown do documento:
Há este pedaço de código nele:
Copie o código do código da seguinte forma:
var página = {
evento: função (evt) {
var ev = evt || janela.evento;
retornar ev;
},
páginaX: função (evt) {
var e = this.event(evt);
retornar e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
},
páginaY: função (evt) {
var e = this.event(evt);
retornar e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
camadaX: função (evt) {
var e = this.event(evt);
retornar e.layerX || e.offsetX;
},
camadaY: função (evt) {
var e = this.event(evt);
retornar e.camadaY || e.offsetY;
}
}
Entre eles, event obtém o evento do mouse, pageX e pageY obtêm as coordenadas do mouse, layerX e layerY obtêm a distância entre o mouse e a borda div.
Há também um trecho de código:
Copie o código do código da seguinte forma:
if (dv.setCapture) {
dv.setCapture();
}
senão if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
Isso serve para capturar os eventos MouseMove e MouseUp da div. Se você não conhece o tx, pode verificar online.
3. Eventos MouseMove e mouseUp do documento:
Copie o código do código da seguinte forma:
d.onmousemove = função (e) {
var tx = página.páginaX(e) - x;
var ty = página.páginaY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
}
d.onmouseup=função(){
if (dv.releaseCapture) {
dv.releaseCapture();
}
senão if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
Entre eles, tx e ty são os códigos mais importantes, usados para definir as coordenadas div.
Algumas pessoas podem perguntar por que -x,-y?
x, y realmente obtém a distância entre o mouse e a borda div, se não for subtraída
As coordenadas da seta do mouse são iguais às coordenadas xey do div. Após arrastar, a posição do mouse se moverá para o canto superior esquerdo.
Copie o código do código da seguinte forma:
if (dv.releaseCapture) {
dv.releaseCapture();
}
senão if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
O código acima serve para cancelar os eventos onmousemove e onmouseup do documento após o mouse ser liberado.
Tenho aprendido js recentemente e compartilharei minhas novas experiências com vocês no futuro. Espero aprender e progredir junto com todos.