HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         body{
  10.             margin: 0;
  11.         }
  12.         a{
  13.             position: absolute;
  14.             top: 0;
  15.             left: 0;
  16.             width: 100px;
  17.             height: 100px;
  18.             background-color: green;
  19.         }
  20.         div{
  21.             position: absolute;
  22.             top: 0;
  23.             left: 0;
  24.             width: 100px;
  25.             height: 100px;
  26.             background-color: orange;
  27.             display: none;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <a href="javascript:;">百度</a>
  33.     <div></div>
  34. </body>
  35. <script src="./js/untils.js"></script>
  36. <script src="./js/index.js"></script>
  37. <script>
  38.     var  oLink = document.getElementsByTagName('a')[0],
  39.         oMenu = document.getElementsByTagName('div')[0];
  40.     oLink.dragNclick(oMenu,function(){
  41.         window.open('http://www.baidu.com');
  42.     });
  43. </script>
  44. </html>

JS

Element.prototype.dragNclick = (function (menu, elemClick) {

    var bTime = 0,
        eTime = 0,
        oPos = [],
        cbTime = 0,
        ceTime = 0,
        counter = 0,
        t = null,
        wWidth = getViewportSize().width,
        wHeight = getViewportSize().height,
        eleWidth = parseInt(getStyles(this, 'width')),
        eleHeight = parseInt(getStyles(this, 'height')),
        mWidth = getStyles(menu, 'width'),
        mHeight = getStyles(menu, 'height');

    // console.log(eleWidth,eleHeight);

    drag.call(this);

    function drag() {
        var x,
            y,
            _self = this;

        addEvent(this, 'mousedown', function (e) {
            var e = e || window.event,
                btnCode = e.button;
            if (btnCode === 2) {
                var mLeft = pagePos(e).X,
                    mTop = pagePos(e).Y;
                if (mLeft <= 0) {
                    mLeft = 0;
                } else if (mLeft >= wWidth - mWidth) {
                    mLeft = pagePos(e).X - mWidth;
                }

                if (mTop <= 0) {
                    mTop = 0;
                } else if (mTop >= wHeight - mHeight) {
                    mTop = pagePos(e).Y - mWidth;
                }
                menu.style.left = mLeft + 'px';
                menu.style.top = pagePos(e).Y + 'px';
                menu.style.display = 'block';
            } else if (btnCode === 0) {
                bTime = new Date().getTime();
                oPos = [getStyles(_self, 'left'), getStyles(_self, 'top')];

                x = pagePos(e).X - getStyles(_self, 'left');
                y = pagePos(e).Y - getStyles(_self, 'top');

                addEvent(document, 'mousemove', mouseMove);
                addEvent(document, 'mouseup', mouseUp);
                cancelBubble(e);
                preventDefaultEvent(e);
            }
        });

        addEvent(document, 'contextmenu', function (e) {
            var e = e || window.event;
            preventDefaultEvent(e);
        });

        addEvent(document, 'click', function (e) {
            console.log(menu);
            menu.style.display = 'none';

        });

        addEvent(menu, 'click', function (e) {
            var e = e || window.event;
            cancelBubble(e);
        })

        function mouseMove(e) {
            var e = e || window.event;
            eleLeft = pagePos(e).X - x,
                eleTop = pagePos(e).Y - y;

            if (eleLeft <= 0) {
                eleLeft = 0;
            } else if (eleLeft >= wWidth - eleWidth) {
                console.log(eleLeft);
                eleLeft = wWidth - eleWidth - 1;
            }

            if (eleTop <= 0) {
                eleTop = 0;
            } else if (eleTop >= wHeight - eleHeight) {
                console.log(eleTop);
                eleTop = wHeight - eleHeight - 1;
            }

            _self.style.left = eleLeft + 'px';
            _self.style.top = eleTop + 'px';
        }

        function mouseUp(e) {
            var e = e || window.event;
            eTime = new Date().getTime();

            if (eTime - bTime < 100) {
                _self.style.left = oPos[0] + 'px';
                _self.style.top = oPos[1] + 'px';

                counter++;

                if (counter === 1) {
                    cbTime = new Date().getTime();
                }
                if (counter === 2) {
                    ceTime = new Date().getTime();
                }
                if (cbTime && ceTime && (ceTime - cbTime < 200)) {
                    elemClick();
                }
                t = setTimeout(function () {
                    cbTime = 0;
                    ceTime = 0;
                    counter = 0;
                    clearTimeout(t);
                }, 200);

            }
            removeEvent(document, 'mousemove', mouseMove);
            removeEvent(document, 'mouseup', mouseUp);
        }
    }
});