CSSコード
コードコピーは次のとおりです。
<style type = "text/css">
* {
マージン：0px;
パディング：0px;
フォントファミリー：「Micsoft Yahei」、「Microsoft Yahei」;
フォントサイズ：15px;
}
div {
幅：50px;
高さ：50px;
背景：＃f00;
ボーダーラジウス：5px;
-moz-border-radius：5px;
-webkit-border-radius：5px;
カーソル：ポインター;
位置：絶対;
上：60px;
左：30px;
}
入力{
位置：絶対;
トップ：10px;
左：10px;
パディング：3px;
カーソル：ポインター;
}
</style>
HTMLコード
コードコピーは次のとおりです。
<body>
<入力型= "button" value = "元の方法で返す"/>
<div> </div>
</body>
JavaScriptコード
コードコピーは次のとおりです。
<script type = "text/javascript">
// 1。マウスをトリガーとしてクリックすることから始めます。
// 2。マウスをクリックして移動するときは、マウスの動きイベントをトリガーしてアレイにデータを注入します（座標を移動）
// 3。マウスがdivから離れて移動することで終わります
// 4。 [元の戻り]ボタンをクリックして、配列（移動座標）をトラバースし、配列内のDivの座標移動をトリガーして「戻り」関数を実現します。
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;
// 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;
//ドラッグ後にマウスの位置を取得します
var l = event.clientx;
var t = event.clienty;
//ドラッグされた位置を配列に保存し、ドラッグされたマウスの位置を使用して、オブジェクトのマウスの位置（ドラッグされたオブジェクトの位置）を差し引きます。
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;
};
falseを返します。
}
//元のリターンのコアは、移動時に座標を記録してから、配列を再注文し、アレイに広い値をオブジェクトに割り当てるようにタイマーを設定することです。
obtn.onclick = function（）{
arrtop.Reverse（）; // Reorder
arrleft.Reverse（）; // Reorder
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>