JavaScript模拟文件拖选框样式v1.0的实例

图片不清楚时请右键点击"在新链接中打开图片"

实现效果

JavaScript模拟文件拖选框样式v1.0的实例

页面布局

JavaScript模拟文件拖选框样式v1.0的实例

实现思路

拖选框

css样式中设置拖选框样式,注意设置position: absolute;漂浮状态.

监听p#container的鼠标按下事件并获取起始坐标,鼠标按下时通过append()方法添加p#selectBox.

鼠标按下事件后鼠标移动事件,比较鼠标的当前位置event.pageX,event.pageY来为p#selectBox添加坐标top/left

和尺寸width/height.

鼠标离开p#container或鼠标松开事件后,remove()方法移除p#selectBox

单选

监听li点击事件;

通过li>子元素.lebal>子元素指向lebal使用toggleClass()方法修改背景样式(显示/取消勾选);

通过this指向li元素本身使用toggleClass()方法修改背景颜色;

复选

监听鼠标按下事件,按下时取消现有的leballi的勾选样式;

监听li,当鼠标移动到上面时,添加样式;

鼠标松开时移除mouseover事件,使它不会继续选中;

遗留问题

拖拽速度快时会有部分文件选不中,初步判断是代码执行效率低的问题

JavaScript模拟文件拖选框样式v1.0的实例

以某个文件为起点选择时,有时无法选中该文件

如果在该文件上短暂停留后可以选中,初步判断时代码执行效率低的问题

JavaScript模拟文件拖选框样式v1.0的实例

想要点击复选按钮时可以完成复选,但单选绑定的click事件与复选的mousedown事件冲突

点击复选按钮时会触发复选的mousedown,移除选择样式,代码逻辑问题

已解决 : 复选框的mousedown事件阻止冒泡 $(".lebal").bind('mousedown', function(event) {event.stopPropagation();})

JavaScript模拟文件拖选框样式v1.0的实例

JavaScript模拟文件拖选框样式v1.0的实例

360云盘复选框拖拽选中后再移开鼠标,则会取消判定该文件的选中,不清楚应该往哪里加逻辑

JavaScript模拟文件拖选框样式v1.0的实例

源代码

<<index.html>>

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://www.jb51.net/js/jquery-3.2.1.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/script.js"></script> <link type="text/css" href="https://www.jb51.net/css/style.css" > </head> <body> <div> <ul> <li> <div><label></label></div> <div><p>文件列表</p></div> </li> <li> <div><label></label></div> <div><p>文件列表</p></div> </li> <li> <div><label></label></div> <div><p>文件列表</p></div> </li> <li> <div><label></label></div> <div><p>文件列表</p></div> </li> <li> <div><label></label></div> <div><p>文件列表</p></div> </li> <li> <div><label></label></div> <div><p>文件列表</p></div> </li> <li> <div><label></label></div> <div><p>文件列表</p></div> </li> <li> <div><label></label></div> <div><p>文件列表</p></div> </li> <li> <div><label></label></div> <div><p>文件列表</p></div> </li> </ul> </div> </body> </html>

<<style.css>>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wydpgw.html