Posted in Javascript onSeptember 13, 2016
本文实例讲述了jQuery实现的简单拖拽功能。分享给大家供大家参考，具体如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background: #f00;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<script src="jquery.js"></script>
<script>
$(function(){
//移动窗口的步骤
//1、按下鼠标左键
//2、移动鼠标
$('div').mousedown(function(e){
// e.pageX
var positionDiv = $(this).offset();
var distenceX = e.pageX - positionDiv.left;
var distenceY = e.pageY - positionDiv.top;
//alert(distenceX)
// alert(positionDiv.left);
$(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>
效果图如下：
希望本文所述对大家jQuery程序设计有所帮助。
jQuery实现的简单拖拽功能示例
- Author -
onestopweb声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@