JS 拖动弹出层

最新推荐文章于 2024-01-06 11:51:11 发布

wjiaoling136

最新推荐文章于 2024-01-06 11:51:11 发布

阅读量145

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/wjiaoling136/article/details/84515550

JS 专栏收录该内容

58 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的可拖动弹出层功能。通过简单的JSP代码和JavaScript函数，实现了弹窗的创建及鼠标触发的拖动效果，并限制了弹窗在页面内的移动范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS写的对弹出层的拖动功能，虽然不怎么看的懂，先记着吧，以后慢慢看。

1、JSP代码：

<div id="textDiv" align="center" style="background-color:white;border:1px solid #38533c;z-index:102;position:absolute;top:5px; left:20%;display: none;padding-bottom: 5px;">			
		<div style="height:32px; background:#3877bc;width:400px;cursor:move;">
		<span style=float:left;line-height:32px;color:#fff;font-size:13px;text-indent:5px;>文本内容</span>
		<span style="line-height:32px;float:right;cursor:pointer;"><img src="images/clo.jpg"  height=32 width=32 onclick="closeTextDiv()"/></span>
		</div>
			<ul  class="ztree" style="overflow:auto" >
				<textarea id="textContent" cols="61" rows="10">
					要显示的内容
				</textarea>
			</ul>
</div>

2、JS调用拖动功能：

document.getElementById("textDiv").getElementsByTagName("div")[0].onmousedown=tuodong;

3、拖动JS代码：

var oBox=null;
var bDrag = false;
var disX = disY = 0;
var ptid="";
function tuodong(event){
	oBox=this.parentNode;
	ptid=this.parentNode.id;
	var event = event || window.event;
	bDrag = true;
	disX = event.clientX - oBox.offsetLeft;
	disY = event.clientY - oBox.offsetTop;
}
//拖拽开始
	document.onmousemove = function (event)
	{
		if (!bDrag) return;
		if(oBox==null) return false;
		var event = event || window.event;
		var iL = event.clientX - disX;
		var iT = event.clientY - disY;
		var aX = [oBox.offsetLeft];
		var aY = [oBox.offsetTop];
		var maxL = document.body.clientWidth - oBox.offsetWidth;
		var maxT = document.body.clientHeight - oBox.offsetHeight;	

		iL = iL < 0 ? 0 : iL;
		iL = iL > maxL ? maxL : iL; 		
		iT = iT < 0 ? 0 : iT;		

		oBox.style.marginTop = oBox.style.marginLeft = 0;
		oBox.style.left = iL + "px";
		oBox.style.top = iT + "px";		

		aX.push(iL);
		aY.push(iT);

		return false
	};
//鼠标释放, 结束拖拽
	document.onmouseup = function ()
	{
		bDrag = false;
	};

4、这个弹出层是在鼠标点击的地方弹出的，定位代码来自：

http://yubosun.akhtm.com/tech/js-position-xiangdui-layer.htm

<style type="text/css">
#thelayer{
 width:300px;height:98px;border:#E4F5FD 1px solid;z-index:2;position:absolute;background:#FFFFFF;display:none;
}
</style>

<script>
function CPos(x, y)
{
    this.x = x;
    this.y = y;
}

function GetObjPos(ATarget)
{
    var target = ATarget;
    var pos = new CPos(target.offsetLeft, target.offsetTop);
    
    var target = target.offsetParent;
    while (target)
    {
        pos.x += target.offsetLeft;
        pos.y += target.offsetTop;
        
        target = target.offsetParent
    }
    
    return pos;
}
function showlayer(obj) {
 pos = GetObjPos(obj);
 l = document.getElementById("thelayer");
 l.style.left = pos.x + 40;
 l.style.top = pos.y + 40;
 l.style.display="block";
}
</script>

<div onclick="showlayer(this)">点我</div>

<div id="thelayer">浮我</div>