您的位置：首页 > 其它

[封装插件]鼠标拖动元素跟随功能

2018-02-24 21:04 363 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标拖动元素跟随功能</title>
<!--百度在线压缩地址-->
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

<style>
*{
margin:0;
padding:0;
}
#divid{
width:100px;
height: 100px;
background:red;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>

<!--<p>鼠标位于坐标： <span></span>.</p>    });-->
<div id="divid">

</div>
<script type="text/javascript">
/**
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。
clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。
pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动
*/
//完整的鼠标拖动案例封装方法
function drag(obj) {
obj.bind("mousedown",start);
function start(event){
//deltaX 和deltaY就表示鼠标在元素的那个位置
deltaX = event.clientX-obj.offset().left;
deltaY = event.clientY-obj.offset().top;

$(document).bind("mousemove",move);
$(document).bind("mouseup",stop);
return false;   //防止出现拖动速度过快发生的滑出屏幕现象

}

function move(event) {
obj.css({
//然后元素的坐标就等于鼠标的位置减去鼠标和元素的偏移量
"left": (event.clientX - deltaX) + "px",
"top": (event.clientY - deltaY) + "px",
})
return false;   //防止出现拖动速度过快发生的滑出屏幕现象
}

function stop() {
$(document).unbind("mousemove", move);  //把所有的事件解绑
$(document).unbind("mouseup", stop);    //把所有的事件解绑
}
}
obj = $("#divid");
drag(obj);
//使用这种方法完成目的会有bug , 当元素移动到外边的时候,鼠标会跟随,鼠标释放事件就消失了
/*    $("#divid").mousedown(function(){
$(document).bind("mousemove",function(e){
x = e.clientX;
y = e.clientY;
$("#divid").css({"top":y+"px","left":x+"px"});
});
$(this).mouseup(function(){
$(document).unbind("mousemove");
});
})*/

/*
使用JS的方式去实现
val = document.getElementById("divid");

ab1a
val.onmousedown = function(){
document.onmousemove = function(event){
x = event.clientX;
y = event.clientY;
val.style.top = y+"px";
val.style.left = x+"px";

}
}
*/

</script>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航