简单的实现JQUERY拖动层
代码
<script language="javascript" type="text/javascript">
$(function () {
$.fn.extend({ moveDiv: function () {
var Coordinate = function () { };
Coordinate.offsetX = 0;
Coordinate.offsetY = 0;
Coordinate.Obj = this;
state = false;
$(this).mousedown(function (event) {
state = true;
Coordinate.offsetX = event.offsetX;
Coordinate.offsetY = event.offsetY;
});
$(this).mouseup(function () {
state = false;
});
$("body").mousemove(function (event) {
if (state) {
var leftP = event.clientX - Coordinate.offsetX;
var TopP = event.clientY - Coordinate.offsetY;
$(Coordinate.Obj).css({ "left": leftP, "top": TopP });
$(Coordinate.Obj).html(leftP);
}
});
}
});
$("#d").moveDiv();
});
</script>
$(function () {
$.fn.extend({ moveDiv: function () {
var Coordinate = function () { };
Coordinate.offsetX = 0;
Coordinate.offsetY = 0;
Coordinate.Obj = this;
state = false;
$(this).mousedown(function (event) {
state = true;
Coordinate.offsetX = event.offsetX;
Coordinate.offsetY = event.offsetY;
});
$(this).mouseup(function () {
state = false;
});
$("body").mousemove(function (event) {
if (state) {
var leftP = event.clientX - Coordinate.offsetX;
var TopP = event.clientY - Coordinate.offsetY;
$(Coordinate.Obj).css({ "left": leftP, "top": TopP });
$(Coordinate.Obj).html(leftP);
}
});
}
});
$("#d").moveDiv();
});
</script>
<body>
<form id="form1" runat="server">
<div id="d">
</div>
</form>
</body>
<form id="form1" runat="server">
<div id="d">
</div>
</form>
</body>
因为拖拽属于一个组合事件。。所以使用扩展，将这些组合事件定义为一个新的功能。
