jq实现鼠标拖拽效果

来源：互联网发布：小米生态链产品知乎编辑：程序博客网时间：2024/06/06 09:52

<!doctype html>

<head>

<style>

padding: 0;

margin: 0;

}

div{

width: 100px;

height: 100px;

background: #f00;

cursor: pointer;

position: absolute;

left: 0;

top: 0;

}

</style>

</head>

<body>

$(function(){

//移动窗口的步骤

//1、按下鼠标左键

//2、移动鼠标

$('div').mousedown(function(e){

// e.pageX

var positionDiv = $(this).offset();

var distenceX = e.pageX - positionDiv.left; //记录鼠标点击的位置与div左上角水平方向的距离

var distenceY = e.pageY - positionDiv.top; //记录鼠标点击的位置与div左上角数值方向的距离

$(document).mousemove(function(e){

var x = e.pageX - distenceX;

var y = e.pageY - distenceY;

if(x<0){

x=0;

}

else if(x>$(document).width()-$('div').outerWidth(true)){

x = $(document).width()-$('div').outerWidth(true);

}

if(y<0){

y=0;

}

else if(y>$(document).height()-$('div').outerHeight(true)){

y = $(document).height()-$('div').outerHeight(true);

}

$('div').css({

'left':x+'px',

'top':y+'px'

});

$(document).mouseup(function(){

$(document).off('mousemove'); //移除鼠标移动事件

});

</script>

</body>

</html>

注意：例子中的DIV为绝对定位，并相对于body。

阅读全文

0 0