您的位置：首页 > Web前端 > JavaScript

点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）

2013-12-01 23:11 1066 查看

效果：

思路：

利用onmousedown事件实现拖拽。首先获得鼠标横坐标点和纵坐标点到div的距离，然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离。然后在判断不让DIV移出可视区，然后再赋予DIV的位置。最后关闭鼠标onmouseup事件。

代码：

<head runat="server">
<title></title>
<style type="text/css">
#div1
{
width: 200px;
height: 200px;
background: #00FFFF;
position: absolute;
border: 1px solid;
}
</style>
<script type="text/javascript">
window.onload = function () {
var div = document.getElementById('div1');
var disX = 0;
var disY = 0;
document.onmousedown = function (ev) {  //鼠标按下
var oEvent = ev || event;       //判断浏览器兼容
disX = oEvent.clientX - div1.offsetLeft;    //鼠标横坐标点到div的offsetLeft距离
disY = oEvent.clientY - div1.offsetTop;     //鼠标纵坐标点到div的offsetTop距离
document.onmousemove = function (ev) {      //鼠标移动
var oEvent = ev || event;
var l = oEvent.clientX - disX;          //获取div左边的距离
var t = oEvent.clientY - disY;          //获取div上边的距离
if (l < 0) {        //判断div的可视区，为避免DIV失去鼠标点
l = 0;
}
else if (l > document.documentElement.clientWidth - div.offsetWidth) {
l = document.documentElement.clientWidth - div.offsetWidth;
}
if (t < 0) {
t = 0;
}
else if (t > document.documentElement.clientHeight - div.offsetHeight) {
t = document.documentElement.clientHeight - div.offsetHeight;
}
div.style.left = l + 'px';      //确定DIV的左边位置
div.style.top = t + 'px';       //确定DIV的上边位置
}
document.onmouseup = function () {      //当鼠标松开后关闭移动事件和自身事件
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航