(function(){
const currentElement = document.currentScript,
div = document.createElement('div');
div.id = "tongjiniao-tool"
div.innerHTML = `
`
console.log(currentElement);
currentElement.insertAdjacentElement('afterend', div);
(function(){
const tongjiniaoFloatButDem = document.querySelector('.tongjiniao-float-but'),
tongjiniaoFloatBoxDem = document.querySelector('.tongjiniao-float-box'),
tongjiniaoDem = document.querySelector('#tongjiniao-tool');
console.log(tongjiniaoFloatButDem);
let lockDisplayStatus = 0;
tongjiniaoFloatButDem.addEventListener('mouseover',function(){
tongjiniaoFloatBoxDem.style.display = 'block';
tongjiniaoFloatBoxDem.style.opacity = '1';
})
tongjiniaoDem.addEventListener('mouseleave',function(){
if(lockDisplayStatus == 0){
tongjiniaoFloatBoxDem.style.opacity = '0';
tongjiniaoFloatBoxDem.style.display = 'none';
}
})
tongjiniaoFloatButDem.addEventListener('click',function(){
lockDisplayStatus = lockDisplayStatus == 0 ? 1:0;
if(lockDisplayStatus == 1){
tongjiniaoFloatBoxDem.style.display = 'block';
tongjiniaoFloatBoxDem.style.opacity = '1';
}else{
tongjiniaoFloatBoxDem.style.opacity = '0';
tongjiniaoFloatBoxDem.style.display = 'none';
}
})
dragging()
function dragging() {
var tongjiniaoTop = parseInt(window.getComputedStyle(tongjiniaoFloatButDem).top, 10),
tongjiniaoLeft = parseInt(window.getComputedStyle(tongjiniaoFloatButDem).left, 10),
tongjiniaoWidth = tongjiniaoFloatButDem.scrollWidth,
tongjiniaoFloatBoxWidth = tongjiniaoFloatBoxDem.scrollWidth,
tongjiniaoFloatBoxHeight = tongjiniaoFloatBoxDem.scrollHeight;
if((tongjiniaoTop + tongjiniaoWidth + 10 + tongjiniaoFloatBoxHeight + 10) < window.innerHeight){
tongjiniaoFloatBoxDem.style.top = (tongjiniaoTop + tongjiniaoFloatButDem.scrollHeight + 10) + 'px';
}else{
tongjiniaoFloatBoxDem.style.top = (tongjiniaoTop - ( 10 + tongjiniaoFloatBoxHeight)) + 'px';
}
// 记录拖动状态的变量
let dragging = false;
// 记录元素位置的变量
let posX = 0, posY = 0;
// 监听PC端鼠标按下事件
tongjiniaoFloatButDem.addEventListener('mousedown', function(e) {
mousePressEvent(e)
});
// 监听移动端鼠标按下事件
tongjiniaoFloatButDem.addEventListener("touchstart", function(e) {
mousePressEvent(e)
});
// 鼠标按下事件
function mousePressEvent(e){
dragging = true;
// 获取元素当前位置
var x = e.clientX || e.touches[0].clientX,
y = e.clientY || e.touches[0].clientY;
posX = x - parseInt(window.getComputedStyle(tongjiniaoFloatButDem).left, 10);
posY = y - parseInt(window.getComputedStyle(tongjiniaoFloatButDem).top, 10);
}
// 监听PC端鼠标移动事件
window.addEventListener('mousemove', function(e) {
mouseMovementEvent(e)
});
// 监听移动端鼠标移动事件
window.addEventListener("touchmove", function(e) {
mouseMovementEvent(e)
});
//鼠标移动事件
function mouseMovementEvent(e){
if (!dragging) {
return false;
}
lockDisplayStatus = 1
var x = e.clientX || e.touches[0].clientX,
y = e.clientY || e.touches[0].clientY,
innerWidth = document.body.offsetWidth,
innerHeight = window.innerHeight,
tongjiniaoWidth = tongjiniaoFloatButDem.scrollWidth,
tongjiniaoHeight = tongjiniaoFloatButDem.scrollHeight,
tongjiniaoFloatBoxWidth = tongjiniaoFloatBoxDem.scrollWidth,
tongjiniaoFloatBoxHeight = tongjiniaoFloatBoxDem.scrollHeight;
// 更新元素位置
if((x - posX + tongjiniaoWidth) > innerWidth ){
tongjiniaoFloatButDem.style.left = innerWidth - tongjiniaoWidth + 'px';
}else{
tongjiniaoFloatButDem.style.left = ((x - posX) > 0 ? (x - posX ): 0 ) + 'px'
}
if((y - posY + tongjiniaoHeight) > innerHeight ){
tongjiniaoFloatButDem.style.top = innerHeight - tongjiniaoHeight + 'px';
}else{
tongjiniaoFloatButDem.style.top = ((y - posY) > 0 ? (y - posY) : 0 ) + 'px'
}
var tongjiniaoTop = parseInt(window.getComputedStyle(tongjiniaoFloatButDem).top, 10),
tongjiniaoLeft = parseInt(window.getComputedStyle(tongjiniaoFloatButDem).left, 10),
tongjiniaoWidth = tongjiniaoFloatButDem.scrollWidth,
tongjiniaoFloatBoxWidth = tongjiniaoFloatBoxDem.scrollWidth;
if((tongjiniaoTop + tongjiniaoWidth + 10 + tongjiniaoFloatBoxHeight + 10) < window.innerHeight){
tongjiniaoFloatBoxDem.style.top = (tongjiniaoTop + tongjiniaoFloatButDem.scrollHeight + 10) + 'px';
}else{
tongjiniaoFloatBoxDem.style.top = (tongjiniaoTop - ( 10 + tongjiniaoFloatBoxHeight)) + 'px';
}
if((tongjiniaoLeft + tongjiniaoFloatBoxWidth) > document.body.offsetWidth){
tongjiniaoFloatBoxDem.style.left = document.body.offsetWidth - tongjiniaoFloatBoxWidth + 'px';
}else if( tongjiniaoLeft > (tongjiniaoFloatBoxWidth - tongjiniaoWidth)/2){
tongjiniaoFloatBoxDem.style.left = tongjiniaoLeft - (tongjiniaoFloatBoxWidth - tongjiniaoWidth)/2 +'px';
}else{
tongjiniaoFloatBoxDem.style.left = '0px';
}
}
// 监听PC端鼠标抬起事件
window.addEventListener('mouseup', function() {
mouseLiftEvent();
});
// 监听移动端鼠标抬起事件
window.addEventListener("touchend", function(e) {
mouseLiftEvent();
});
// 鼠标抬起事件
function mouseLiftEvent(){
if(dragging == false){
return false;
}
dragging = false;
var screenWidth = document.body.offsetWidth;
if(parseInt(window.getComputedStyle(tongjiniaoFloatButDem).left, 10) > document.body.offsetWidth/2){
tongjiniaoFloatButDem.style.left = screenWidth - tongjiniaoFloatButDem.scrollWidth + 'px';
tongjiniaoFloatBoxDem.style.left = screenWidth - tongjiniaoFloatBoxDem.scrollWidth +'px';
}else{
tongjiniaoFloatButDem.style.left = '0px';
tongjiniaoFloatBoxDem.style.left = '0px';
}
}
}
})()
})()