JS特效(可拖动的div框)和用AJAX实现的可拖动的div框-优快云博客

本文介绍了如何使用AJAX实现可拖动的div框，并结合提示信息效果，展示了前端开发中div元素的动态操作与交互。

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

1. 页面中的部分：
<div id="div1" onmousedown="m(this.id)" style="display:none;left: 0px;top: 0px; position: absolute; left: 150px; top: 2500px;">
	<table width="50%" border="0" cellpadding="3" cellspacing="1" 
	style="background: #ff7300; 
	position:static;filter:progid:DXImageTransform.Microsoft.DropShadow
	(color=#666666,offX=4,offY=4,positives=true)" align="center">
	<tr style="cursor: move;">
		<td><font color="#FFFFFF">往尚空间提示：</font></td>
		<td align="right"><input type="button" value="ｘ" 
	onClick="javascript:closeMsgDiag();" style="cursor:pointer;"></td>
	</tr>
	<tr>
		<td colspan="2" width="100%" bgcolor="#FFFFFF" height="150" 
	align="middle">中国asp之家<br /><br />网址：<a href="http://www.aspxhome.com">http://www.aspxhome.com</a></td>
	</tr>
	</table>
</div>

2. CSS样式的部分：
#div1 {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    padding-top: 10%;
    z-index: 1001;
}

3. JS部分：
function openMsgDiag(){
		document.getElementById('div1').style.display = "inline";
	}
function closeMsgDiag(){
		document.getElementById('div1').style.display = "none";
	}	
	
//定义移动对象和移动坐标
var Mouse_Obj="none",_x,_y;
//拖动对象函数(自动)
document.onmousemove=function()
{
    if(Mouse_Obj!=="none")
    {
    document.getElementById(Mouse_Obj).style.left=_x+event.x;
    document.getElementById(Mouse_Obj).style.top=_y+event.y;
    event.returnValue=false;
    }
}
//停止拖动函数(自动)
document.onmouseup=function()
{
    Mouse_Obj="none";
}
//确定被拖动对象函数 o为被拖动对象
function m(o)
{
    Mouse_Obj=o;
    _x=parseInt(document.getElementById(Mouse_Obj).style.left)-event.x;
    _y=parseInt(document.getElementById(Mouse_Obj).style.top)-event.y;
}

二、用AJAX实现的可拖动的div框(下面有个AJAX弹出提示信息效果.rar)