可拖动的div

最新推荐文章于 2024-07-23 18:15:45 发布

ldz0414

最新推荐文章于 2024-07-23 18:15:45 发布

阅读量74

点赞数

分类专栏： html javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/ldz0414/article/details/84509772

版权

html 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏


<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>

ldz0414

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可拖动的div

[code="html"]拖拽图层function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}//'currentStyle' only for ie5.0+var drag = fun...
复制链接

扫一扫

专栏目录