`

可拖动的div

阅读更多 
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"></meta>
<title>拖拽图层</title>
<header>
<script>
function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}//'currentStyle' only for ie5.0+

var drag = function(bar, target){
var params = {
	startLeft:0,
	startTop:0,
	_X:0,
	_Y:0,
	isDrag:false
};
	if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')}
	if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
	bar.onmousedown = function(e){ 
		e = e?e:window.event; //'event' ie下局部变量，ff下全局变量
		params.isDrag = true;
		params._X = e.clientX; params._Y = e.clientY;
	};
	document.onmouseup = function(){
		params.isDrag = false;
		if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')}
		if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
	};
	document.onmousemove = function(e){
		var e = e?e:window.event;
		if(params.isDrag){
			var curX = e.clientX, curY = e.clientY, desL = curX-params._X+parseInt(params.startLeft), desT = curY-params._Y+parseInt(params.startTop);
			target.style['left'] = desL>=0?desL + 'px':0;
			target.style['top'] = desT>=0?desT + 'px':0;
		}
	}
};
function test(){
	document.getElementById('mybox').style.display='block';
	var bar = document.getElementById('mybar'), tar = document.getElementById('mybox');
	//alert(getStyle(bar, 'display'));
	drag(bar,tar);
}

</script>
</header>
<body>
<div id="mybox" class="shadow" style="position: absolute; border: 4px solid #ccc; left: 300px; top: 10px; box-shadow: 3px 3px 4px #666; display: none;">
<div id="mybar" style="line-height: 24px; padding-left: 10px; background: #eee; border-bottom: 1px solid #ccc; cursor: move;">拖我试试...</div>
<div style="height: 150px; width: 250px; background: #fefefe;">content...</div>
</div>
<a onclick="test()" href="javascript:;">打开</a>
</body>
</html>
分享到：
| 网页禁止右键菜单。禁止拖拽
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics