本文提供了一个使用纯 JavaScript 实现可拖动对话框的示例代码。通过监听鼠标移动事件，实现了一个简单的可拖动对话框效果，适用于网页开发中需要创建自定义弹窗或对话框的场景。
<html>
<head>
<script>
var isMove = false;
var leftInDialog = 0;
var topInDialog = 0;
function mouseMove(e)
{
if(isMove)
{
document.getElementById("dialog").style.left = ((e.pageX || e.x) - leftInDialog) + "px";
document.getElementById("dialog").style.top = ((e.pageY || e.y) - topInDialog) + "px";
}
}
function beginMove(e)
{
isMove = true;
leftInDialog = (e.pageX||e.x) - parseInt(document.getElementById("dialog").style.left);
topInDialog = (e.pageY||e.y) - parseInt(document.getElementById("dialog").style.top);
}
function endMove()
{
isMove = false;
}
</script>
</head>
<body onmousemove="mouseMove(event)">
<div id="dialog" onmousedown="beginMove(event)" onmouseup="endMove()" style="background:white;width:500px;height:200px;border:10px solid #CCCCCC;position:absolute;z-index:9999;left:0px;top:0px;">
<div style="height:30px;background:#75717A;">
</div>
</div>
</body>
</html>
扫一扫
1844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
