Cómo usar js para implementar la función de arrastrar y soltar

Lo que les traigo esta vez es cómo usar js para implementar la función de arrastrar y soltar. ¿Cuáles son las precauciones al usar js para implementar la función de arrastrar y soltar? El siguiente es un caso práctico, echemos un vistazo.

Si desea configurar el objeto para que se arrastre y suelte, debe usar tres eventos y el orden de uso de estos tres eventos no se puede invertir.

1.onmousedown: Evento de mouse hacia abajo

2.onmousemove: Evento de movimiento del mouse

3.onmouseup: Evento de mouse arriba

El El principio básico de arrastrar y soltar es mover el elemento arrastrado de acuerdo con el movimiento del mouse. El movimiento del mouse es el cambio de las coordenadas xey; el movimiento del elemento es el cambio de estilo. Posición arriba e izquierda. Por supuesto, no siempre mover el mouse hará que el elemento se mueva, pero debe determinar si el estado del botón izquierdo del mouse está presionado y si está presionado en un elemento que se puede arrastrar.

La idea básica es la siguiente:

Estado de arrastre = 0 cuando se presiona el mouse sobre el elemento {

Estado de arrastre = 1

Registre las coordenadas xey del mouse

Registre las coordenadas xey del elemento

}

Cuando el mouse se mueve sobre el elemento{

Si el estado de arrastre es 0, no hagas nada.

Si el estado de arrastre es 1, entonces

Elemento y = mouse actual y - mouse original y + elemento original y

Elemento x = ahora mouse x - mouse original x + elemento original x

}

Parte del código de muestra, cuando el mouse sale del elemento en cualquier momento {

Estado de arrastre = 0

}:

Parte HTML

************

Parte CSS

Calculadora {

posición: absoluta /* Establecer posición absoluta: absoluta /* Establecer posicionamiento absoluto, fuera del flujo de documentos, para arrastrar y soltar* /

pantalla: bloque;

ancho: 218px;

alto: 280px;

cursor: mover /* El mouse se arrastra Animación* /

}Parte JS

window.onload = function() {

//función de arrastre (principalmente activa tres eventos: onmousedown/onmousemove/onmouseup)

var drag = document.getElementById('drag');

// Simplemente use el objeto de arrastre al hacer clic en el objeto. mover y arriba son áreas globales, es decir, áreas comunes a todo el documento, y deben usarse con el objeto del documento en lugar del objeto de arrastre (de lo contrario, cuando se usa el objeto de arrastre, el objeto solo se moverá hacia la derecha o hacia abajo)

arrastrar.onmousedown = función(e) {