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>