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