webCollection
/
副本 test.htm

<!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" lang="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>�������Ч��</title>
</head>

<body bgcolor="#66CCFF">
<table>
<tr><td><a>1</a></td><td><a>2</a></td><td><a>3</a></td></tr>
<tr><td><a>4</a></td><td><a id="one">5</a></td><td><a>6</a></td></tr>
<tr><td><a>7</a></td><td><a>8</a></td><td><a>9</a></td></tr>
</table>
<script>
//test
    var DragHandler = {

        // private property.
        _oElem: null,

        // public method. Attach drag handler to an element.
        attach: function (oElem) {
            oElem.onmousedown = DragHandler._dragBegin;

            // callbacks
            oElem.dragBegin = new Function();
            oElem.drag = new Function();
            oElem.dragEnd = new Function();

            return oElem;
        },


        // private method. Begin drag process.
        _dragBegin: function () {
            var oElem = DragHandler._oElem = this;
            oElem.style.position = "absolute";

            oElem.style.left = (window.event.clientX - oElem.inicialOffsetX) + 'px';
            oElem.style.top = (window.event.clientY - oElem.inicialOffsetY) + 'px';

            var x = parseInt(oElem.style.left);
            var y = parseInt(oElem.style.top);

            var e = window.event;
            oElem.mouseX = e.clientX;
            oElem.mouseY = e.clientY;

            oElem.dragBegin(oElem, x, y);

            document.onmousemove = DragHandler._drag;
            document.onmouseup = DragHandler._dragEnd;
            document.onlosecapture = DragHandler._dragEnd;
            return false;
        },


        // private method. Drag (move) element.
        _drag: function () {
            e = window.event;
            if ((e == undefined) || (e.button != 1)) return;
            var oElem = DragHandler._oElem;

            var x = parseInt(oElem.style.left);
            var y = parseInt(oElem.style.top);

            oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
            oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';

            oElem.mouseX = e.clientX;
            oElem.mouseY = e.clientY;

            oElem.drag(oElem, x, y);
            return false;
        },


        // private method. Stop drag process.
        _dragEnd: function () {
            var oElem = DragHandler._oElem;
            var x = parseInt(oElem.style.left);
            var y = parseInt(oElem.style.top);

            oElem.dragEnd(oElem, x, y);
            oElem.style.position = "";
            document.onmousemove = null;
            document.onmouseup = null;
            DragHandler._oElem = null;
        }

    };
    //*-----------------------------------------


    function EventForWeb(paraEle) {//Ϊweb�����¼���Ӧ��
        //the element "Ele" has been created.
        this.isDown = false;
        this.isRDown = false;
        this.firRDownT = null;
        this.firRUpT = null;
        this.isDbClick = 0;
        this.firClickTime = null;
        this.secClickTime = null;
        this.Ele = paraEle;

        this.firDownT = null;
        this.firUpT = null;


        this.timeFunName = null;
        var _this = this;

        this.active_element;
        this.bIsMSIE;


        this.isLButton = function (e) {
            var isIE = navigator.userAgent.indexOf("MSIE") > 0 ? true : false;
            if (isIE)

                return e.button == 1;
            else
                return e.button == 0;
        };

        this.isRButton = function () {
            var isIE = navigator.userAgent.indexOf("MSIE") > 0 ? true : false;
            if (isIE)
                return e.button == 2;
            else
                return e.button == 2;
        };
        //����1,������������ӵ�<a href="http://www.yahoo.com">yahoo.com</a>������ʱ����<div id="tip"></div>��һֱ����"����ڴ�����"��������ʾ��

        this.Ele.onmouseover = function () {
            return false;
        };

        //����2,������뿪���ӵ�<a href="http://www.yahoo.com">yahoo.com</a>������ʱ��<div id="tip"></div>��һֱ���к���"����ڴ�������"������
        this.Ele.onmouseout = function () {
            return false;
        };

        //����3,�ڴ�Ԫ�������У�����������ס����ʱ������functioin  funcAMouseOn(){//do something}��
        this.funcAMouseOn = function () {
            var dragEle = _this.Ele.cloneNode(true);
            dragEle.id = "drag" + _this.ID;
            //dragEle.style.zIndex = dragEle.style.zIndex + 1;
            dragEle.setAttribute("inicialOffsetX", window.event.offsetX);
            dragEle.setAttribute("inicialOffsetY", window.event.offsetY);

            document.body.appendChild(dragEle);
            DragHandler.attach(dragEle, false);
            return false;
        };


        this.Ele.onmousedown = function (e) {
            e = e || window.event;
            if (_this.isLButton(e)) {
                _this.firDownT = new Date();
                _this.isDown = true;
                _this.funcAMouseOn();
            }
            else if (_this.isRButton(e)) {
                _this.isRDown = true;
                _this.firRDownT = new Date();
            }
        };


        //����4,�ڴ�Ԫ�������У�����������ס���Ų��ƶ���Ҳ�����϶���ʱ��<div id="tip"></div>��һֱ���к���"�����֧��Ԫ��"�����֣�
        this.Ele.onmousemove = function () {
            if (_this.isDown) {

                return false;
            }
        };

        //����5,�ڴ�Ԫ�������У�����������סһ��ʱ���ſ�ʱ������functioin  funcBLeftMouseUp(){//do something}��
        this.funcBLeftMouseUp = function () {
            //"����funcBLeftMouseUp";
//            var tmp = $("drag" + _this.ID); //�϶���ϣ�ɾ�������Ƶ��ƶ�Ԫ��_this.Ele.cloneNode(true);
//            tmp.parentNode.removeChild(tmp);
            return false;
        };
        this.funcBRightClick = function () {
            //����funcBRightClick
            return false;
        };

        //this.a.onmouseup=function(){if(_this.isDown)_this.funcBLeftMouseUp();_this.isDown=false;} ;
        this.Ele.onmouseup = function (e) {
            if (_this.isLButton(e)) {
                _this.firUpT = new Date();
                if (_this.isDown) _this.funcBLeftMouseUp();
                _this.isDown = false;
            }
            else if (_this.isRButton(e)) {
                _this.firRUpT = new Date();
                if (_this.isRDown && (_this.firRUpT.getTime() - _this.firRDownT.getTime() < 200)) {
                    _this.funcBRightClick();
                    _this.isRDown = false;
                }
            }
        };


        if (window.attachEvent) {
            _this.active_element = document.activeElement;
            _this.bIsMSIE = true;
            document.onfocusout = function () {
                if (_this.bIsMSIE && (_this.active_element != document.activeElement)) {
                    _this.active_element = document.activeElement;
                }
                else {
                    if (_this.isDown) _this.funcBLeftMouseUp();
                    _this.isDown = false;
                }
            };
        }
        //window.attachEvent("blur",function(){alert(_this.isDown);if(_this.isDown)_this.funcBLeftMouseUp();_this.isDown=false;});
        else
            window.onblur = function () { if (_this.isDown) _this.funcBLeftMouseUp(); _this.isDown = false; };


        //����6,�ڴ�Ԫ�������У�������������ʱ������functioin  funcBLeftClick(){//do something}��
        this.funcBLeftClick = function () {
            //����funcBLeftClick";
            open("urlredirect.aspx?url=" + this.Link);
            return false;
        };

        this.Ele.onclick = function () {
            clearTimeout(_this.timeFunName);
            _this.timeFunName = setTimeout(function () {
                if (_this.isDbClick == 0 && _this.firUpT.getTime() - _this.firDownT.getTime() < 200)
                    _this.funcBLeftClick();
                _this.isDbClick = 0;
            }, 300);
            return false;
        };


        this.funcBLeftDbClick = function () {
            //"����funcBLeftDbClick";
            return false;
        };


        this.Ele.ondblclick = function () {
            _this.isDbClick = 1;
            _this.funcBLeftDbClick();
        };

    }

    var myDraggingWeb = new EventForWeb(document.getElementById("one"));
    //-----------------------------------------------------------
</script>

</body>
</html>