$(function () {
$(document).mousemove(function (e) {
if (!!this.move) {
var posix = !document.move_target ? { 'x': 0, 'y': 0 } : document.move_target.posix,
callback = document.call_down || function () {
$(this.move_target).css({
'top': e.pageY - posix.y,
'left': e.pageX - posix.x
});
};
callback.call(this, e, posix);
}
}).mouseup(function (e) {
if (!!this.move) {
var callback = document.call_up || function () { };
callback.call(this, e);
$.extend(this, {
'move': false,//是否执行触发操作
'move_target': null, //操作的元素对象
'call_down': false, //mousemove的时候的回调函数，传回来的this指向document
'call_up': false //当鼠标弹起的时候执行的回调函数，传回来的this指向document
});
}
});
var $box = $('.box').mousedown(function (e) {
var offset = $(this).offset();
this.posix = { 'x': e.pageX - offset.left, 'y': e.pageY - offset.top };
$.extend(document, { 'move': true, 'move_target': this });
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery拖放</title>
<script src="JScript/jquery.min.js"></script>
<script src="JScript/test/test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: #eee;
}
.box {
200px;
height: 100px;
cursor: move;
position: absolute;
top: 30px;
left: 30px;
background-color: #ffee00;
border: 1px solid #CCCCCC;
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
}
.main_tabletop {
100%;
height: 20px;
background: #ffee00;
}
</style>
</head>
<body>
<div class="box">
<div class="main_tabletop">我是可以拖动的标题</div>
</div>
</body>
</html>