1.jquery.move.js
(function($){
$.fn.jquerymove = function(){
var moveobj = $(this);
var old_position = {};
var new_position = {};
var offset = {};
var isover = 1;
var offset_fake = {};
moveobj.css({position: "absolute",cursor: "move" });
moveobj.mousedown(
function (e) {
old_position = {X:e.clientX,Y:e.clientY};
offset = moveobj.offset();
isover = 0;
$('body').append('<div id="_moveobj"></div>');
$('#_moveobj').css({
width: moveobj.width() - 50,
height: moveobj.height()-100,
left: offset.left,
top: offset.top - 20,
cursor: 'move',
position: 'absolute',
display: 'none',
zIndex: '10000',
border: '1px solid red'
});
$('#_moveobj').mouseup(
function (e) {
isover = 1;
$('#_moveobj').css({display: 'none'});
$('#_moveobj').remove();
}
);
$('#_moveobj').css({display: 'block'});
offset_fake = $('#_moveobj').offset();
}
);
$('body').mousemove(
function (e) {
if (!isover) {
new_position = {X:e.clientX,Y:e.clientY};
$('#_moveobj').css({
left: offset_fake.left+new_position.X-old_position.X,
top: offset_fake.top+new_position.Y-old_position.Y
})
moveobj.css({
left: offset.left+new_position.X-old_position.X,
top: offset.top+new_position.Y-old_position.Y
})
}
}
);
}
})(jQuery);
2.query.move.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.move.js"></script>
<script type="text/javascript" >
jQuery(document).ready(
function () {
// jQuery(".cn").jquerymove();
jQuery("#name").jquerymove();
}
);
</script>
</head>
<body>
<div id="name" class="cn" style="width:200px;height:200px;background:gray;text-align:center;">
</div>
</body>
</html>
转帖地址:http://bbs2.chinaunix.net/viewthread.php?tid=1309400
代码很容易就能看懂,按照自己的需求修改一下jquery.move.js里的函数,源文件在上面的地址下载就可以