<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
background-color: #e8e8e8;
}
.cover {
position: relative;
width: 600px;
height: 500px;
border: 1px solid #EEE;
background-color: rgba(255,0,255,0.7);
}
.cover {
transform-origin: 50% 50% 0;
-webkit-transform-origin: 50% 50% 0;
}
</style>
<script src="Scripts/jquery-1.8.2.js"></script>
</head>
<body>
<div style="padding: 100px;">
<div id="moveId" class="cover">可移动窗口</div>
</div>
<script type="text/javascript">
(function ($) {
//拖拽插件,参数:id或object
$.Move = function (_this) {
if (typeof (_this) == 'object') {
_this = _this;
} else {
_this = $("#" + _this);
}
if (!_this) {
return false;
}
_this.css({ 'position': 'absolute' }).hover(function () {
$(this).css("cursor", "move");
}, function () {
$(this).css("cursor", "default");
})
_this.mousedown(function (e) {//e鼠标事件
var offset = $(this).offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
_this.css({ 'opacity': '0.3' });
$(document).bind("mousemove", function (ev) {
//绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件
_this.bind('selectstart', function () { return false; });
var _x = ev.pageX - x;//获得X轴方向移动的值
var _y = ev.pageY - y;//获得Y轴方向移动的值
_this.css({ 'left': _x + "px", 'top': _y + "px" });
});
});
$(document).mouseup(function () {
$(this).unbind("mousemove");
_this.css({ 'opacity': '' });
})
};
})(jQuery)
$.Move($('#moveId'));
</script>
</body>
</html>