<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<!-- <script type="text/javascript" src="jquery-1.2.6.js"></script>-->
<script type="text/javascript" src="cssJs.js"></script> <!--http://blog.csdn.net/xxb2008/article/details/9137621-->
</head>
<style type="text/css">
.content { margin: 0 auto; width: 400px; height: 300px; padding: 10px; margin: 10px; border: 10px solid black;
position: relative;}
.clientBox{padding: 10px; margin: 10px; cursor: move; width: 10px; overflow: hidden; height: 10px; border: 10px solid red;
position: absolute; left: 0px;top:0px;background: white}
#msg{position: fixed;right: 0; top: 20px}
</style>
<body>
<div class="content">
<div class="clientBox" id="clientBox"></div>
</div>
<div id="msg"></div>
</body>
</html>
<script type="text/javascript">
var Event = {
addEventListener:function (target, type, listener) {
var _type = "on" + type;
if (target.attachEvent) { //ie
target.attachEvent(_type, listener);
} else if (target.addEventListener) { //ff
target.addEventListener(type, listener, false);
} else {
target[_type] = listener;
}
},
removeEventListener:function (target, type, listener) {
var _type = "on" + type;
if (target.detachEvent) { //ie
target.detachEvent(_type, listener);
} else if (target.removeEventListener) { //ff
target.removeEventListener(type, listener, false);
} else {
target[_type] = null;
}
},
fix:function (event) {
event = window.event || event;
var e = {
originalEvent:event
}
for (var i in event) {
e[i] = event[i];
}
if (!e.pageX) {
var doc = document.documentElement, body = document.body;
e.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0)
- (doc && doc.clientLeft || body && body.clientLeft || 0);
e.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0)
- (doc && doc.clientTop || body && body.clientTop || 0);
}
e.preventDefault = function () {
if (this.originalEvent.preventDefault)
this.originalEvent.preventDefault();
this.originalEvent.returnValue = false;
};
e.stopPropagation = function () {
if (this.originalEvent.stopPropagation)
this.originalEvent.stopPropagation();
this.originalEvent.cancelBubble = true;
};
return e;
},
callEvent : function(obj, func){
return function(event){
return func.call(obj,Event.fix(event));
}
},
apply : function(obj, func){
return function() {
return func.apply(obj, arguments);
}
}
}
var Dom = {
$:function (id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
}
function Drag(boxId){
this.init(boxId);
};
Drag.prototype = {
box:null,
x:0,
y:0,
isIE:(document.all) ? true : false,
init:function (boxId) {
this.box = Dom.$(boxId);
this._mouseDown = Event.callEvent(this, this.mouseDown);
this._move = Event.callEvent(this, this.move);
this._mouseUp = Event.callEvent(this, this.mouseUp);
Event.apply(this, this.start)();
},
move:function (event) {
event = Event.fix(event);
event.preventDefault();
event.stopPropagation();
//清除选择
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.box.style.left = event.pageX - this.x + "px";
this.box.style.top = event.pageY - this.y + "px";
},
mouseDown:function (event) {
event = Event.fix(event);
event.preventDefault();
event.stopPropagation();
/*box的top,left为0,margin为10,offsetLeft包含了margin,所在要加回来--IE需要再加clientLeft*/
//this.x = event.pageX - this.box.offsetLeft + parseInt(CssJs.get(this.box, "marginLeft"));
//this.y = event.pageY - this.box.offsetTop + parseInt(CssJs.get(this.box, "marginTop"));
this.x = event.pageX - parseInt(CssJs.get(this.box, "left"));
this.y = event.pageY - parseInt(CssJs.get(this.box, "top"));
Event.addEventListener(document, "mousemove", this._move);
Event.addEventListener(document, "mouseup", this._mouseUp);
if (this.isIE) {
Event.addEventListener(this.box, "losecapture", this._mouseUp);//焦点丢失
this.box.setCapture(); //设置鼠标捕获
} else {
Event.addEventListener(window, "blur", this._mouseUp);//焦点丢失
}
},
mouseUp:function (event) {
this.stop();
},
stop:function () {
if (this.isIE) {
Event.removeEventListener(this.box, "losecapture", this._mouseUp);//焦点丢失
this.box.releaseCapture(); //设置鼠标捕获
} else {
Event.removeEventListener(window, "blur", this._mouseUp);//焦点丢失
}
Event.removeEventListener(document, "mousemove", this._move);
Event.removeEventListener(document, "mouseup", this._mouseUp);
},
start:function () {
Event.addEventListener(this.box, "mousedown", this._mouseDown);
}
}
new Drag("clientBox");
/*
box的top,left为0,margin为10,offsetLeft包含了margin,所在要加回来
this.x = event.pageX - this.box.offsetLeft + parseInt(CssJs.get(this.box,"marginLeft"));
this.y = event.pageY - this.box.offsetTop + parseInt(CssJs.get(this.box,"marginTop"));
*/
</script>