python 输入框拖动随意摆放_点击页面的悬浮窗口实现随意拖动

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

1.html

{{userCount || 0}}人在线

{{status}}

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;

};

};

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