如何实现一个可拖动的窗口的JavaScript工作原理？

本文共计834个文字，预计阅读时间需要4分钟。

可拖动的窗口（仅JS部分的工作原理）+ 窗口拖动原理：在鼠标按下左键时，改变可拖动窗口相对于上级窗口的绝对定位，从而实现窗口随鼠标移动的现象。关键：获取鼠标移动的距离

可拖动的窗口（只是JS部分的工作原理）

/* 窗口拖动 原理：在鼠标按住左键时，改变可拖动窗体相对于上级窗体的绝对定位位置，从而实现窗体随鼠标移动的现象 关键：获取鼠标移动的量来改变窗体的移动量。 1、鼠标与窗体的相对距离；2、鼠标移动后的新位置再加相对距离即窗体的新位置 事件顺序： 1、页面加载后即要绑定鼠标进入事件。当鼠标进入时再动态绑定按下、移出事件 2、当按下左键时再动态绑定抬起、移动事件 3、当鼠标快速移动致窗体移动跟不上移动时，鼠标会移出窗体致其它动态绑定的事件没有取消，故 在进入时要取消所有事件（除进入事件外） 注意： 1、可拖动窗体必须绝对定位。 2、要设定一个区域让左键点击并拖动 3、事件的触发顺序及各自的功能设置 4、鼠标与窗体的相对位置，鼠标当前的位置的计算逻辑。 $('#sbxx_drag') 可拖动窗口中的标题，点住此对象可以拖动整个窗口 $('#sbxx') 可拖动窗口的外框，将所有拖动时显示的内容全部放在里面，实现此移动则整体移动。外框是绝对定位，此时相对于浏览器窗体左上点的偏移量，带有单位px e.pageX 鼠标当前相对浏览器窗口左上点的偏移量 parseInt($('#sbxx').css("left") 将带有单位的一个字符串值转成数值。 鼠标相对于窗体左上角的位置 - 可拖动窗体相对于窗体左上角的位置 ＝ 鼠标相对于可拖动窗体的位置。