遮罩层的拖拽效果

                                 遮罩层的拖拽效果

开发工具与关键技术：Adobe Dreamweaver CC 2018 // jquery3.21.min.js
作者：李德新
撰写时间：2019年01月 31日

jquery插件是我们学习IT技术必须学会的使用的技术，而js代码也是非常重要的，所以现在我来演示一下遮罩层的拖拽效果。
首先的布局很重要，先要按要求布置好布局才能实现遮罩层的拖拽效果。如下图：

下图是页面布局的css样式，如此便能完成遮罩层的样式。

接下来，便是引入jquery3.21.min.js插件，然后完成js代码。首先为外层div添加鼠标点击事件，mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。clientX和clientY代表鼠标当前的横纵坐标 ，获取盒子的位置。下一步就是当鼠标指针在指定的元素中移动时，发生 mousemove 事件改变盒子位置，最后是当在元素上放松鼠标按钮时，发生 mouseup 事件。如此便能完成遮罩层的拖拽效果。