JavaScript实现[网易云音乐Web站登录窗口]拖拽功能

摘要：说明你可能发现有很多网站他们的登录窗口或者说是登录框是可以拖动的更有甚者他们的站点提示框都可以拖动你也许可能会对这个功能的实现感兴趣那么这篇文章可能会对你有所帮助具体的网站示例以网易云音乐站点为例，具体效果如下图所示实现登录窗口的拖拽原理解

你可能发现有很多网站他们的登录窗口或者说是登录框是可以拖动的, 更有甚者他们的站点提示框都可以拖动, 你也许可能会对这个功能的实现感兴趣, 那么这篇文章可能会对你有所帮助！具体的网站示例以 网易云音乐 Web站点为例，具体效果如下图所示:

预先假设要实现的登录框允许点击鼠标获取拖拽事件的具体位置就是登录框的标题区块也就是下图所示登录区块黑色部分在文章中以 允许点击鼠标获取拖拽事件区域 说明问题, 并且假定 红色十字 图标就是鼠标状态:

当鼠标在 允许点击鼠标获取拖拽事件区域 点击鼠标时触发 onmousedown 事件

获取鼠标在 允许点击鼠标获取拖拽事件区域 点击时的具体位置

当鼠标移动时改变 登录窗口 左上角位置(也是就是坐标点位置)距离页面可视区左上角位置, 那么这个 登录窗口 也就移动了, 也就实现了 登录窗口 的拖拽功能

当鼠标移动时触发 onmousemove 事件

当鼠标抬起时, 触发 onmouseup 事件

释放 onmousemove 事件

释放 onmouseup 事件自身

以上过程就是一个完整的 登录窗口 拖拽的过程, 不过要注意以下几点:

拖拽移动 登录窗口 时为 document 绑定 onmousemove 事件, 而不是 允许点击鼠标获取拖拽事件区域

为什么这样做呢? 如果只是为 允许点击鼠标获取拖拽事件区域 绑定 onmousemove 件事, 当鼠标移动的快了就会导致事件绑定丢失, 不过你可以去验证

下图是将 onmousemove 绑定到 允许点击鼠标获取拖拽事件区域 这样其是不对的！

下图是将 onmousemove 绑定到 document 上的事件, 这样才是最完美的, 因为你不管怎么拖它都不会丢失事件绑定

抬起鼠标时同样也是为 document 绑定 onmouseup 事件, 而不是 允许点击鼠标获取拖拽事件区域

为什么呢？如果只是为 允许点击鼠标获取拖拽事件区域 绑定 onmouseup 事件, 你会发现当鼠标移动到脱离文档可视区域时，抬起点击的鼠标按键你会发现当再一次移动鼠标时它依然可以移动这就不符合常理了不是嘛！那就给 document 绑定 onmouseup 事件时，它就可以很好的解决这个怪异的问题！

下图是将 onmouseup 绑定到 允许点击鼠标获取拖拽事件区域 这样其是不对的！

下图是将 onmouseup 绑定到 document 上的事件, 这样才是最完美的

不过你会发现拖不回来了, 这是问题也是后面要说的优化问题, 先留一坑，一会填坑时再说！

    
    
    
    


    
    

        

            登录
            X
        
    

以上就是以一个简单的DIV模拟 登录窗口 实现的一个简单拖拽过程

你可能已经发现了这个 登录窗口 与 网易云音乐 最大的区别在于它可以拖拽出文档可视区域, 它甚至可以拖拽到文档不可见区域, 那就永远拖不回了, 就像那已分手并结婚了的前女友永远也回不来一样

(好了, 找一没人的地哭晕在厕所好了  是不是同时又想起来那几句话[得不到的永远在骚动, 失去的永远在怀念, 身边的永远成为风景, ......]), 以上是逗逼时刻就当没发生一样好了 
其实这也是上面留的一个坑, 现在来优化填坑, 就是实现和 网易云音乐 网站 登录窗口 一样的效果, 禁止 登录窗口 拖拽出文档可视区以外! 下面是填坑时刻, 非战斗人员请火速离开现场  

其实思路很简单就是当 登录窗口 的四个边和文档窗口的其一边界重合时, 就让 登录窗口 的那一个边的外边距值与重合的文档那一个边的值相等, 那这个事情就妥妥的搞定了!

只需要修改 documnet.onmousemove 事件方法 登录窗口 当前位置即可!

// 当鼠标移动时改变弹出框的位置
oDialog.style.left = oEvent.clientX - iDisX + "px";
oDialog.style.top = oEvent.clientY - iDisY + "px";

改写如下:

// 优化填坑 - 禁止 `登录窗口` 拖拽出文档可视区域, 保存 `登录窗口` 在文档中具体位置
var iCurrentDialogDisLift = oEvent.clientX - iDisX; // `登录窗口` 当前位置于X轴具体值
var iCurrentDialogDisTop = oEvent.clientY - iDisY;  // `登录窗口` 当前位置于Y轴具体值

// 检测当前 `登录窗口` X轴是否位于文档可视区域最左侧或最右侧
if ( iCurrentDialogDisLift < 0 ) {
    iCurrentDialogDisLift = 0;
} else if ( iCurrentDialogDisLift > document.documentElement.clientWidth - oDialog.offsetWidth  ) {
    // 当前文档X轴可视区域大小包括左右边框线宽度 - `登录窗口` X轴区域大小包括左右边框线宽度
    iCurrentDialogDisLift = document.documentElement.clientWidth - oDialog.offsetWidth;
}

// 检测当前 `登录窗口` Y轴是否位于文档可视区域最上端或最下端
if ( iCurrentDialogDisTop < 0 ) {
    iCurrentDialogDisTop = 0;
} else if ( iCurrentDialogDisTop > document.documentElement.clientHeight - oDialog.offsetHeight ) {
    // 当前文档Y轴可视区域大小包括上下边框线宽度 - `登录窗口` Y轴区域大小包括上下边框线宽度
    iCurrentDialogDisTop = document.documentElement.clientHeight - oDialog.offsetHeight;
}

// 当鼠标移动时改变弹出框的位置
oDialog.style.left = iCurrentDialogDisLift + "px";
oDialog.style.top = iCurrentDialogDisTop + "px";

    
    
    
    


    
    

        

            登录
            X
        
    

文章写到这里可能也有不伙伴说了, 滚动一小段距离也就是出现滚动条时, 再拖拽还是会出现 登录窗口 脱离可视区域的情况!
对于小伙伴提出的问题至少有二种解决方案！

添加滚动距离计算, 当页面滚动后实时让 登录窗口 位于正中间并且只允许在可视区域拖拽

添加模态框, 就是当出现 登录窗口 时禁止滚动

下面来一个一个的说:

    
    
    
    


    
    

        

            登录
            X
        
    

至于添加模态框, 就是当出现 登录窗口 时禁止滚动这种方法你可以试着实现一下！

Github: JavaScript实现【网易云音乐Web站登录窗口】拖拽功能

以上就是实现与 网易云音乐 Web站 登录窗口  拖拽效果一致的具体过程
希望本文对你的工作和学习有所帮助
如果觉得还不错怎么感谢我呢？ 妈呀! 点赞啊!
Good Luck! from warnerwu at 2017.08.19 AM