Con los cambios de los tiempos, la importancia de js se siente cada vez más. js no solo puede crear páginas web (como Ext framework), sino también crear algunos efectos especiales web. Estos efectos especiales no solo son compatibles con PC, sino también compatibles. con los teléfonos móviles, después de todo, se basan en El navegador no tiene nada que ver con la plataforma. Ahora las aplicaciones del sistema Windows 8 de Microsoft se pueden desarrollar usando js. Si tienes tiempo, puedes probarlo.
Ahora vayamos al grano y hablemos sobre cómo implementar Div arrastrable en js. Para lograr esta función, primero hablemos de la idea:
1. Capture el evento del mousedown del div del mouse.
2. Capture el evento de movimiento del mouse del documento.
3. Cancelar el evento
Entonces echemos un vistazo al código:
Copie el código de código de la siguiente manera:
función Arrastrar(id) {
var $ = función (bandera) {
devolver document.getElementById(bandera);
}
$(id).onmousedown = función (e) {
var d = documento;
var página = {
evento: función (evt) {
var ev = evt || ventana.evento;
devolver ev;
},
páginaX: función (evt) {
var e = this.event(evt);
devolver e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
},
páginaY: función (evt) {
var e = this.event(evt);
devolver e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
capaX: función (evt) {
var e = this.event(evt);
devolver e.layerX || e.offsetX;
},
capaY: función (evt) {
var e = this.event(evt);
devolver e.capaY || e.offsetY;
}
}
var x = página.layerX(e);
var y = página.layerY(e);
si (dv.setCapture) {
dv.setCapture();
}
de lo contrario si (ventana.captureEvents) {
ventana.captureEvents(Evento.MOUSEMOVE | Evento.MOUSEUP);
}
d.onmousemove = función (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 = función () {
si (dv.releaseCapture) {
dv.releaseCapture();
}
de lo contrario si (ventana.releaseEvents) {
ventana.releaseEvents(Evento.MOUSEMOVE | Evento.MOUSEUP);
}
d.onmousemove = nulo;
d.onmouseup = nulo;
}
}
}
Análisis de código:
1.
Obtener objeto div
Copie el código de código de la siguiente manera:
var $ = función (bandera) {
devolver document.getElementById(bandera);
}
2. Capture el evento del mousedown del documento:
Hay este fragmento de código en él:
Copie el código de código de la siguiente manera:
var página = {
evento: función (evt) {
var ev = evt || ventana.evento;
devolver ev;
},
páginaX: función (evt) {
var e = this.event(evt);
devolver e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
},
páginaY: función (evt) {
var e = this.event(evt);
devolver e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
capaX: función (evt) {
var e = this.event(evt);
devolver e.layerX || e.offsetX;
},
capaY: función (evt) {
var e = this.event(evt);
devolver e.capaY || e.offsetY;
}
}
Entre ellos, el evento obtiene el evento del mouse, la páginaX y la páginaY obtienen las coordenadas del mouse, y la capaX y la capaY obtienen la distancia entre el mouse y el borde div.
También hay un fragmento de código:
Copie el código de código de la siguiente manera:
si (dv.setCapture) {
dv.setCapture();
}
de lo contrario si (ventana.captureEvents) {
ventana.captureEvents(Evento.MOUSEMOVE | Evento.MOUSEUP);
}
Esto es para capturar los eventos MouseMove y MouseUp del div. Si no conoce tx, puede consultarlo en línea.
3. eventos MouseMove y mouseUp del documento:
Copie el código de código de la siguiente manera:
d.onmousemove = función (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 = función () {
si (dv.releaseCapture) {
dv.releaseCapture();
}
de lo contrario si (ventana.releaseEvents) {
ventana.releaseEvents(Evento.MOUSEMOVE | Evento.MOUSEUP);
}
d.onmousemove = nulo;
d.onmouseup = nulo;
}
Entre ellos, tx y ty son los códigos más importantes y se utilizan para establecer las coordenadas div.
Algunas personas pueden preguntar ¿por qué -x, -y?
x, y en realidad obtienen la distancia entre el mouse y el borde div, si no se resta
Las coordenadas de la flecha del mouse son las mismas que las coordenadas xey del div. Después de arrastrar, la posición del mouse se moverá a la esquina superior izquierda. El efecto es que rebotará después de arrastrar.
Copie el código de código de la siguiente manera:
si (dv.releaseCapture) {
dv.releaseCapture();
}
de lo contrario si (ventana.releaseEvents) {
ventana.releaseEvents(Evento.MOUSEMOVE | Evento.MOUSEUP);
}
d.onmousemove = nulo;
d.onmouseup = nulo;
El código anterior es para cancelar los eventos onmousemove y onmouseup del documento después de soltar el mouse.
He estado aprendiendo js recientemente y compartiré mis nuevas experiencias con ustedes en el futuro. Espero aprender y progresar junto con todos.