JS簡単ドラッグ効果

2953 ワード

JavaScript IE set capture

「javascript権威の手引き」をまねて、簡単なドラッグ・プログラムを書きました.雀は小さいながら、五臓が全部そろっています.
原理:モバイルイベントを登録して、要素をマウスに従って移動させます.mouseupイベントを登録して、mousemooveイベントを削除します.マウスを離す時は、要素が移動しなくなり、指定の位置に固定できます.mousedownイベントにmousemooveイベントとmouseupイベントを登録すると、完全なドラッグが完了します.
ポイント:IEにおけるsetCapture()の応用.すべてのMouseEventをキャプチャする役割を果たしています.設定が完了したら、マウスがウィンドウに移動して登録したマウスイベントを起動することができます.ここでの役割は、マウスの移動が速すぎて元素の境界を越えた時に、もともとは無効になるはずだったmousemoveイベントが依然として効果を発揮するというものです.ffとchromeには対応する設定がないので、mousemoveとmouseupイベントをdocuementオブジェクトに指定できます.このようにマウスがどのように移動してもdocumentにあります.実はieにこのように書いてもいいです.set Capture()をセットしなくてもいいです.設定したのと比べて唯一の違いは元素がウィンドウの境界を右に移動する時に、元素は常に視認範囲内にあります.


<!docType html>
<html>
<head>
<style type="text/css">
#drag {border:1px solid blue;width:100px;height:100px;position:absolute;}
</style>
</head>
<body>
<input id="x"  />
<input id="y"  />
<div id="drag"></div>

<script><!--
var drag = document.getElementById('drag');
var inputX = document.getElementById('x');
var inputY = document.getElementById('y');
if(document.attachEvent){
drag.attachEvent('onmousedown',dragHandle);
}else{
drag.addEventListener('mousedown', dragHandle,false);
}
function dragHandle(event){
	var event = event||window.event;
	var startX = drag.offsetLeft;
	var startY = drag.offsetTop;
	var mouseX = event.clientX;
	var mouseY = event.clientY;
	var deltaX = mouseX - startX;
	var deltaY = mouseY - startY;
	if(document.attachEvent){
		drag.attachEvent('onmousemove',moveHandle);
		drag.attachEvent('onmouseup',upHandle);
		drag.attachEvent('onlosecapture',upHandle);
		drag.setCapture();
	}else{
		document.addEventListener('mousemove',moveHandle,true);
		document.addEventListener('mouseup',upHandle,true);
	}
	function moveHandle(event){
		var event = event||window.event;
		drag.style.left = (event.clientX - deltaX)+"px";
		drag.style.top = (event.clientY - deltaY)+"px";
		inputX.value=drag.style.left;
		inputY.value=drag.style.top;
	}
	function upHandle(){
		if(document.attachEvent){
			drag.detachEvent('onmousemove',moveHandle);
			drag.detachEvent('onmouseup',upHandle);
			drag.detachEvent('onlosecapture',upHandle);
			drag.releaseCapture();
		}else{
			document.removeEventListener('mousemove',moveHandle,true);
			document.removeEventListener('mouseup',upHandle,true);
		}
	}

}
//--</script>
</body>
</html>

もちろん、この例は、ドラッグ範囲を限定して視覚範囲外に移動することができないなどの拡張も可能であり、mousemove方法を変更すればよい.

JavaScript引用タイプの基本包装タイプ例分析【Boolean、Number、String】