jquery实现div移动（转帖）

来源：互联网发布：java mqtt开源服务端编辑：程序博客网时间：2024/05/19 02:00

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里的函数，源文件在上面的地址下载就可以