html5jquery制作平滑拖拽效果,jQuery实现的简单拖拽功能示例

本文实例讲述了jQuery实现的简单拖拽功能。分享给大家供大家参考，具体如下：

拖拽

*{

padding: 0;

margin: 0;

}

div{

width: 100px;

height: 100px;

background: #f00;

cursor: pointer;

position: absolute;

left: 0;

top: 0;

}

$(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');

});

});

});

效果图如下：

希望本文所述对大家jQuery程序设计有所帮助。