dialog

时间：2014-08-06 22:31:42 阅读：207 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="miniDrag.js"></script>
    <style type="text/css">
        #dragBody{width: 300px;height: 200px; background: white; color: #333; position: relative;}
        #dragHandler{height: 40px; line-height: 40px; background: #333; color: white; position: relative;}
        #hoverEff{width: 200px;height: 200px;border: 1px solid;}
        #dragclose { text-decoration: none; color: white; display: block; width: 40px; height: 40px; text-align: center; position: absolute; right: 0; top: 0; }
        #dragclose:hover { background: #f5f5f5; color: #333; }
        body { background: #A9A9A9; }
    </style>

    <script type="text/javascript">
    window.onload=function(){
        var dragBody = document.getElementById("dragBody");
        var dragHandler = document.getElementById("dragHandler");
        var dragclose = document.getElementById("dragclose");
        
        dragBody.style.top = "50px";
        dragBody.style.left = "50px";
        var drag_a = new miniDrag();
            drag_a.handler = dragHandler;
            drag_a.dragBody = dragBody;
            drag_a.init();
}
    </script>
</head>
<body>
<div id="dragBody">
    <div id="dragHandler"></div>
</body>
</html>

var miniDrag =function() {
    this.handler = null;
    this.dragBody = null;
    this.preventX = false;
    this.preventY = false;
    this.scopeX = false;
    this.scopeY = false;
    this.initmouseX = null;
    this.initmouseY = null;
    this.initX = null;
    this.initY = null;
};
miniDrag.prototype.init = function() {
    var _this = this,
        dragBody = this.dragBody,
        handler = this.handler;
    handler.onmousedown = function(e){ return _this.start(e)};   //闭包改变this指向
    dragBody.onDragStart = new Function();
    dragBody.onDragEnd = new Function();
    dragBody.onDrag = new Function();
};
miniDrag.prototype.start = function(e) {
    e = fixEvent(e);
    var _this = this,
        dragBody = this.dragBody,
        handler = this.handler;    
    this.intmouseX = e.pageX,
    this.intmouseY = e.pageY;
    this.initY = parseInt(dragBody.style.top),
    this.initX = parseInt(dragBody.style.left);
    document.onmousemove = function(e){return _this.dragging(e)};
    document.onmouseup = function(e){return _this.end(e)};
    dragBody.onDragStart(this.initY,this.initX);
    return false; //重要，避免不同实例事件冲突
};
miniDrag.prototype.dragging = function(e) {
    e = fixEvent(e);
    var _this = this,
        dragBody = this.dragBody,
        handler = this.handler;    
    if (document.all) {
        handler.setCapture();
    } else {
        e.preventDefault();
    }
    if(!_this.preventY) {
        var top = _this.initY + e.pageY - _this.intmouseY;
        if(top < parseInt(_this.scopeY[0])){top = _this.scopeY[0]};
        if(top > parseInt(_this.scopeY[1])){top = _this.scopeY[1]};
        dragBody.style.top = top + "px";
    }
    if(!_this.preventX) {
        var left = this.initX + e.pageX - this.intmouseX;
        if(left < parseInt(_this.scopeX[0])){left = _this.scopeX[0]};
        if(left > parseInt(_this.scopeX[1])){left = _this.scopeX[1]};
        dragBody.style.left = left + "px";
    }
    dragBody.onDrag(top,left);
    return false;
};
miniDrag.prototype.end = function() {
    var dragBody = this.dragBody;
    dragBody.onDragEnd();
    if (document.all) {
        this.handler.releaseCapture()
    };
    document.onmousemove = null;
    document.onmouseup = null;
};
var fixEvent = function(e) {
    var sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
        st = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    if (typeof e == "undefined") e = window.event;
    if (typeof e.pageX == "undefined") e.pageX = e.clientX + sl + document.body.clientLeft;
    if (typeof e.pageY == "undefined") e.pageY = e.clientY + st + document.body.clientTop;
    if (typeof e.layerX == "undefined") e.layerX = e.offsetX;
    if (typeof e.layerY == "undefined") e.layerY = e.offsetY;
    return e;
};

dialog,布布扣,bubuko.com

dialog

标签：style blog color java os io art ar

原文地址：http://www.cnblogs.com/qiqing/p/3895674.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行