código CSS
La copia del código es la siguiente:
<style type = "text/css">
* {
margen: 0px;
relleno: 0px;
Font-Family: "MicSoft Yahei", "Microsoft Yahei";
tamaño de fuente: 15px;
}
div {
Ancho: 50px;
Altura: 50px;
Antecedentes: #F00;
Border-Radius: 5px;
-Moz-Border-Radius: 5px;
-WebKit-Border-Radius: 5px;
cursor: puntero;
Posición: Absoluto;
Arriba: 60px;
Izquierda: 30px;
}
aporte{
Posición: Absoluto;
arriba: 10px;
Izquierda: 10px;
relleno: 3px;
cursor: puntero;
}
</style>
código HTML
La copia del código es la siguiente:
<Body>
<input type = "button" value = "return de la manera original"/>
<div> </div>
</body>
Código JavaScript
La copia del código es la siguiente:
<script type = "text/javaScript">
// 1. Comience haciendo clic en el DIV con el mouse como disparador.
// 2. Al hacer clic en el mouse para moverse, active el evento de movimiento del mouse para inyectar datos en la matriz (mover coordenadas)
// 3. Termine con el mouse alejándose del Div como
// 4. Haga clic en el botón "Regreso original" para atravesar la matriz (coordenadas en movimiento) y activar el movimiento de coordenadas de DIV en la matriz para lograr la función "retorno".
window.onload = function () {
var odiv = document.getElementsBytagName ("div") [0];
var obtn = document.getElementsByTagName ("Entrada") [0];
var tiempo = null, arrtop = [], arrleft = [];
odiv.onmousedown = function (ev) {
Evento var = EV || Window.event;
// consigue las coordenadas del mouse en el div
var disx = event.clientx-odiv.offsetleft;
var disy = event.clienty-odiv.offsettop;
Arrtop = [60];
Arrleft = [30];
document.onmouseMove = function (ev) {
Evento var = EV || Window.event;
// Obtén la posición del mouse después de arrastrar
var l = event.clientx;
var t = event.clienty;
// Guarde la posición arrastrada en la matriz y use la posición del mouse arrastrada para restar la posición del mouse en el objeto, que es la posición del objeto arrastrado.
Arrleft.push (L-DISX);
Arrtop.push (T-Disy);
odiv.style.left = l-disx +"px";
odiv.style.top = t-disy +"px";
};
document.onmouseUp = function () {
document.onmouseMove = null;
document.onmouseUp = null;
};
devolver falso;
}
// El núcleo del retorno original es registrar las coordenadas al moverse, luego reordenar la matriz y establecer un temporizador para asignar valores amplios en la matriz al objeto.
oBT.OnClick = function () {
Arrtop.Reverse (); // reordenar
arrleft.reverse (); // reordenar
var i = 0;
OBTN.TIME = SETINTERVAL (function () {
odiv.style.top = arrtop [i]+"px";
odiv.style.left = arrleft [i]+"px";
i ++;
if (i == Arrtop.length) {
ClearInterval (OBTN.TIME);
Arrtop = [];
arrleft = [];
}
}, 20);
}
}
</script>