Código CSS
A cópia do código é a seguinte:
<style type = "text/css">
* {
margem: 0px;
preenchimento: 0px;
Fonte-família: "Micsoft Yahei", "Microsoft Yahei";
Size da fonte: 15px;
}
div {
Largura: 50px;
Altura: 50px;
Antecedentes: #f00;
Radio de fronteira: 5px;
-Moz-Border-Radius: 5px;
-Webkit-Border-Radius: 5px;
Cursor: Ponteiro;
Posição: Absoluto;
topo: 60px;
Esquerda: 30px;
}
entrada{
Posição: Absoluto;
topo: 10px;
Esquerda: 10px;
preenchimento: 3px;
Cursor: Ponteiro;
}
</style>
Código HTML
A cópia do código é a seguinte:
<Body>
<input type = "button" value = "retornar da maneira original"/>
<div> </div>
</body>
Código JavaScript
A cópia do código é a seguinte:
<script type = "text/javascript">
// 1. Comece clicando na div com o mouse como o gatilho.
// 2. Ao clicar no mouse para se mover, acione o evento de movimento do mouse para injetar dados na matriz (mover coordenadas)
// 3. Termine com o mouse se afastando da div como
// 4. Clique no botão "Retorno original" para atravessar a matriz (coordenadas em movimento) e acionar o movimento de coordenadas da DIV na matriz para obter a função "Retorno".
window.onload = function () {
var odiv = document.getElementsByTagName ("div") [0];
var obtn = document.getElementsByTagName ("input") [0];
var time = null, Arrtop = [], Arrleft = [];
odiv.onmousedown = function (ev) {
Var Event = EV || Window.Event;
// Obtenha as coordenadas do mouse na div
var disx = event.clientx-odiv.offsetleft;
var disy = event.clienty-odiv.offsettop;
Arrtop = [60];
Arrleft = [30];
document.onMousEMove = function (EV) {
Var Event = EV || Window.Event;
// Obtenha a posição do mouse depois de arrastar
var L = event.clientX;
var t = event.clienty;
// Salve a posição arrastada para a matriz e use a posição arrastada do mouse para subtrair a posição do mouse no objeto, que é a posição do objeto arrastado.
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;
};
retornar falso;
}
// O núcleo do retorno original é registrar as coordenadas ao se mover, reordenar a matriz e definir um timer para atribuir valores amplos na matriz ao objeto.
obtn.OnClick = function () {
Arrtop.Reverse (); // reordenar
Arrleft.Reverse (); // Reordem
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>