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

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

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

点击页面的悬浮窗口实现随意拖动相关推荐

移动端悬浮按钮+可随意拖动
移动端悬浮按钮+可随意拖动+松手后自动吸附到屏幕最近边.用fixed定位监听手指事件实现.很简单的小玩意儿,个人喜欢此类用户交互效果,特记录收纳下.可直接划走. <template>< ...
桌面悬浮窗口（可拖动）
一.开发前原理简述桌面悬浮窗口,(如360的清理加速等悬浮按钮),调用WindowManager,并设置WindowManager.LayoutParams的相关属性,通过WindowManager ...
android悬浮窗口的实现
当我们在手机上使用360安全卫士时,手机屏幕上时刻都会出现一个小浮动窗口,点击该浮动窗口可跳转到安全卫士的操作界面,而且该浮动窗口不受其他activity的覆盖影响仍然可见(多米音乐也有相关的和主界面 ...
[导入]如何点击按钮弹出新窗口，输入数据后返回并刷新页面？（老孟）
在一些.NET论坛中有人经常会问:如何在页面中点击按钮打开新页面,输入数据,然后返回到初始页面并进行更新?要解决这个问题,应该弄清楚window.showModalDialog()的用法,本人在htt ...
html点击按钮弹出悬浮窗_JS控制弹出悬浮窗口(一览画面)的实例代码
在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息.如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好.如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理 ...
android 添加随意拖动的桌面悬浮窗口,android 添加随意拖动的桌面悬浮窗口
用过新版本android 360手机助手都人都对 360中只在桌面显示一个小小悬浮窗口羡慕不已吧? 其实实现这种功能,主要有两步: 1.判断当前显示的是为桌面.这个内容我在前面的帖子里面已经有过介绍, ...
android多个悬浮窗口,android 添加随意拖动的桌面悬浮窗口
用过新版本android 360手机助手都人都对 360中只在桌面显示一个小小悬浮窗口羡慕不已吧? 其实实现这种功能,主要有两步: 1.判断当前显示的是为桌面.这个内容我在前面的帖子里面已经有过介绍, ...
点击链接在新窗口打开新页面
1 .点击链接打开新窗口 <a target="_blank" href="http://baidu.com" title="返回" ...
如何点击按钮弹出新窗口，输入数据后返回并刷新页面
如何点击按钮弹出新窗口,输入数据后返回并刷新页面? 作者:孟宪会出自:[孟宪会之精彩世界] 发布日期:2003年7月8日 4点0分13秒在一些.NET论坛中有人经常会问:如何在页面中点击按钮打开新 ...

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

点击页面的悬浮窗口实现随意拖动相关推荐

最新文章

热门文章