您的位置：首页 > 其它

实现简单的鼠标拖拽事件

2018-04-03 17:03 387 查看

实现简单的鼠标拖拽事件

实现原理：在获取鼠标点击后，实现鼠标的移动事件，和鼠标按键松开事件。

首先获取当前

div

的左边和上边距离鼠标位置的距离，分别即为

disX

，

disY

。然后在鼠标后，实现鼠标移动的事件中，赋值给

div

的

style.left

和

style.top

的值为当前鼠标的位置减去

disX

和

disY

后的值。

<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="box" id="box"></div>
<script type="text/javascript">
var box = document.getElementById('box');
document.onmousedown = function(ev){
var oEvent = ev || window.event;
disX = oEvent.clientX - box.offsetLeft;
disY = oEvent.clientY - box.offsetTop;
document.onmousemove = function(ev){
var oEvent = ev || window.event;
var l = oEvent.clientX - disX;
var h = oEvent.clientY - disY;
if(l < 0){
l = 0;
}else if(l > document.documentElement.clientWidth - box.offsetWidth){
l = document.documentElement.clientWidth - box.offsetWidth;
}
if (h < 0) {
h = 0;
}else if(h > document.documentElement.clientHeight - box.offsetHeight){
h = document.documentElement.clientHeight - box.offsetHeight;
}
box.style.left = l + 'px';
box.style.top = h + 'px';
}
document.onmouseup =function(ev){
var oEvent = ev || window.event;
document.onmousemove = null;
document.onmouseup = null;
}
return false;//禁止某些浏览器在div内容为空时，可能会出现的默认事件
}
</script>

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

标签：

相关文章推荐

新的分享

章节导航