点击页面的悬浮窗口实现随意拖动

最近做了个在线聊天窗口  要求是要可以所以拖动。以下是html 和js相关代码：

1.html

<div id="circle" ng-mousedown="move($event)" class="scrollTop" ng-if="onlineService">
                <div class="lineHeightTop" ng-click="openNewWindow()" title="点击进入聊天页面">{{userCount || 0}}人在线</div>
                <div class="lineHeightBottom"><a ng-click="leave()" ng-class="{'redClass':isLeave,'':!isLeave}" >{{status}}</a></div>
            </div>

2.js

 $scope.move = function(event) {
        var circle = document.getElementById("circle");
        var X = event.clientX; //鼠标焦点距浏览器边缘的X距离；
        var Y = event.clientY; //鼠标焦点距浏览器边缘的Y距离；
        var X2 = circle.offsetLeft; //div左边框距浏览器边缘的X距离；
        var Y2 = circle.offsetTop; //div上边框距浏览器边缘的Y距离；

        document.onmousemove = function (event) {
            var X3 = X - X2; //
            var Y3 = Y - Y2; //
            var l = event.clientX - X3;
            var t = event.clientY - Y3;
            if (l < 0) {
                l = 0;
            } else if (l > document.documentElement.clientWidth - circle.offsetWidth) {
                l = document.documentElement.clientWidth - circle.offsetWidth;
            }
            if (t < 0) {
                t = 0;
            } else if (t > document.documentElement.clientHeight - circle.offsetHeight) {
                t = document.documentElement.clientHeight - circle.offsetHeight;
            }
            circle.style.left = l + 'px';
            circle.style.top = t + 'px';
        };
        document.onmouseup = function (event) {
            document.onmousemove = null;
        };
    };

　　以上代码 就可以实现随意拖动在线聊天页面。