JS经典实例网站首页 JS经典实例

javascript窗口拖拽的实现

发布时间：2018-03-28 18:28:36编辑：雪饮阅读（）

结合 onmousedown、onmousemove、onmouseup三个事件以及offsetLeft、offsetTop、clientX、clientY的灵活使用就可以实现可拖拽的窗口

<!DOCTYPE html>

<html>

<head>

<style>

table,caption,th,td{

text-align:center;

border:1px solid pink;

}

table{width:20em;}

</style>

window.onload=function(){

var box=document.getElementById("box");

box.onmousedown=function(evt){

//获取点击窗体中的位置与窗体左边界的距离，设为距离A

var boxInnerLeft=evt.clientX-box.offsetLeft;

//获取点击窗体中的位置与窗体上边界的距离，设为距离B

var boxInnerTop=evt.clientY-box.offsetTop;

document.onmousemove=function(evt){

//移动时候获取鼠标x位置应该不包含距离A，因为当设置left后距离A会自动加上(div的起点是左上角而非中心)

var boxOutLeft=evt.clientX-boxInnerLeft;

box.style.left=boxOutLeft+"px";

//与boxOutLeft同理

var boxOutTop=evt.clientY-boxInnerTop;

box.style.top=boxOutTop+"px";

box.style.position="absolute";

console.log(evt);

}

document.onmouseup=function(){document.onmousemove=null;}

}

</script>

</head>

<body>

<caption style="cursor:move;">管理员登录</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</td>

</tr>

</tfoot>

</table>

</center>

</form>

</body>

</html>

关键字词：javascript,拖拽

上一篇：jquery版ajax方法捕获网络请求错误

下一篇：javascript学习笔记-语法、关键保留字及变量和数据类型

您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

javascript窗口拖拽的实现

相关文章

您当前的位置：首页 > 学无止境 > JS经典实例网站首页 JS经典实例