<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 150px;
height: 150px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('.box').mousedown(function(e){
var e = e || window.event;
var x = e.pageX; //box里面点击x位置
var y = e.pageY; //box里面点击y轴位置
var widt = $(window).width(); //浏览器宽
var heigh = $(window).height(); //高
var boxW = $('.box').width(); //盒子宽
var boxH = $('.box').height(); //高
var posX = $('.box').position().left; //距离左边
var posY = $('.box').position().top; //距离上面
$(document).mousemove(function(e){ //鼠标按下未松开
var e = e || window.event;
var newx = e.pageX; // 鼠标按下x轴
var newy = e.pageY; // 鼠标按下y轴
var movx = newx - x; //浏览器dom 鼠标移动的x - 原来在盒子里面鼠标按下的位置
var movy = newy -y; //同理
var newmovx = posX + movx; // 偏移的x轴位置 + 上面浏览器dom 鼠标移动的x - 原来在盒子里面鼠标按下的位置
var newmovy = posY + movy; //同理
if(posX + movx >= widt - boxW) //如果 距离左边值+浏览器dom 鼠标移动的x - 原来在盒子里面鼠标按下的位置
{ //大于 浏览器宽-盒子宽
newmovx = widt - boxW; // 需要移动的 位置 = 浏览器宽-盒子宽
}
if(posX + movx <= 0) //如果 偏移x轴位置 + 浏览器dom 鼠标移动的x - 原来在盒子里面鼠标按下的位置
{
newmovx = 0; //就代表 鼠标移出去了, 给0
}
if(posY + movy >= heigh - boxH)
{
newmovy = heigh - boxH;
}
if(posY + movy <= 0)
{
newmovy = 0;
}
$('.box').css({'left':newmovx+'px','top': newmovy+'px'}) //set
})
})
$('.box').mouseup(function(){
$(document).off('mousemove');
}) //当点击在盒子上的鼠标松开的 时候 清除事件
//---------------------------------------------------------------
})
</script>
</head>
<body>
<div class="box">
</div>
</body>
</html>
jq拖拽效果
最新推荐文章于 2022-10-17 21:15:31 发布