您的位置：首页 > Web前端 > JavaScript

完美的JsDiv拖动层

2011-11-25 11:19 183 查看 
<!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;"/>
<title>D类</title>
<style type="text/css">
html, body {
margin:0;
}
</style>
<script type="text/javascript">
/Firefox/.test(navigator.userAgent) && function () {
window.__defineGetter__('event', function () {
//兼容Event对象
var o = arguments.callee;
do {
if (o.arguments[0] instanceof Event) return o.arguments[0];
} while (o = o.caller);
return null;
});
window.attachEvent = Document.prototype.attachEvent = Element.prototype.attachEvent = function (type, listener, capture) {
//兼容attachEvent方法
return this.addEventListener(new String(type).substr(2), listener, capture || false);
};
window.detachEvent = Document.prototype.detachEvent = Element.prototype.detachEvent = function (type, listener, capture) {
//兼容detachEvent方法
return this.removeEventListener(new String(type).substr(2), listener, capture || false);
};
} ();

var D = {
//拽补助类
lock: false,
dom: function () {
//document相关属性
return {
left: document.documentElement.scrollLeft
, top: document.documentElement.scrollTop
, width: document.documentElement.clientWidth
, height: document.documentElement.clientHeight
, body: document.documentElement
};
},
mos: function (e) {
//获取鼠标绝对位置
var dom = this.dom();
return { 'x': dom.left + e.clientX, 'y': dom.top + e.clientY }
},
pos: function (o) {
//获取元素绝对位置
var x = 0, y = 0;
do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent);
return { 'x': x, 'y': y };
},
start: function (element, startEventHandler, moveEventHandler, stopEventHandler) {
//移动开始
if (this.lock) return;
else this.lock = true; //先上锁安全。。。:D
var pos = this.pos(element) //元素位置
, mos = this.mos(window.event) //鼠标位置
, eventHandlers = { MF: null, EF: null} //事件记录
, property = { x: mos.x - pos.x, y: mos.y - pos.y} //属性
, _MF = this.move(moveEventHandler, property) //移动过程事件闭包
, _EF = this.stop(element, stopEventHandler, eventHandlers); //移动停止事件闭包
document.attachEvent('onmousemove', _MF); //鼠标移动
document.attachEvent('onmouseup', _EF); //鼠标释放
element.setCapture? (element.setCapture(), element.attachEvent('onlosecapture', _EF)): window.attachEvent('onblur', _EF); //鼠标捕获丢失则释放
eventHandlers.MF = _MF, eventHandlers.EF = _EF;
startEventHandler && startEventHandler(property);
},
move: function (moveEventHandler, property) {
//移动中
var wc = this;
return function (e) {
var mos = wc.mos(e || window.event), dom = wc.dom();
window.getSelection && window.getSelection().removeAllRanges();
/MSIE/.test(navigator.userAgent) && function () {
//IE滚屏
if (mos.x > dom.left + dom.width) dom.body.scrollLeft = mos.x - dom.width;
else if (mos.x < dom.left) dom.body.scrollLeft = mos.x;
if (mos.y > dom.top + dom.height) dom.body.scrollTop = mos.y - dom.height;
else if (mos.y < dom.top) dom.body.scrollTop = mos.y;
} ();
moveEventHandler && moveEventHandler({ x: mos.x - property.x, y: mos.y - property.y });
};
},
stop: function (element, stopEventHandler, eventHandlers) {
//移动结束
var wc = this;
return function (e) {
document.detachEvent('onmousemove', eventHandlers.MF);
document.detachEvent('onmouseup', eventHandlers.EF);
element.setCapture ? (element.detachEvent('onlosecapture', eventHandlers.EF), element.releaseCapture()) : window.detachEvent('onblur', eventHandlers.EF);
wc.lock = false;
//事件都干掉了可以放心解锁了
stopEventHandler && stopEventHandler();
};
}
};

</script>
</head>
<body>

<div style="position:absolute; width:100px; height:100px; background-color:#000000;">
<div style="position:absolute; width:20px; height:20px; line-height:20px; left:50%; top:50%; margin:-10px 0 0 -10px; background-color:#F00; text-align:center; cursor:move;"
onmousedown="var wc = this,pos;D.start(wc, null, function (property) {
var node = wc.parentNode;
pos = property;
var a = D.pos(node), b = D.pos(wc);
node.style.left = pos.x = property.x - b.x + a.x + 'px';
node.style.top = pos.y = property.y - b.y + a.y + 'px';
}, function () {
alert('x:' + pos.x + '\ny:' + pos.y)
});"
>拽</div>
</div>

<div style="width:50px; height:50px; line-height:50px; text-align:center; background-color:#F00;

position:absolute; cursor:move;"
onmousedown="var wc = this,pos;D.start(wc, null, function (property) {
pos = property;
wc.style.left = property.x + 'px';
wc.style.top = property.y + 'px';
}, function () {
alert('x:' + pos.x + '\ny:' + pos.y)
});"
>拽</div>
<div style="height:1000px;"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航