码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-08-12 11:24:49      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

最近做了个在线聊天窗口  要求是要可以所以拖动。以下是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;
        };
    };

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

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

标签:

原文地址:http://www.cnblogs.com/baizhanshi/p/5763910.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!