文件拖动v1.0

当图片不清晰时，请右键单击“在新链接中打开图片”

达到效果

页面布局

实现理念

下型箱

在css样式中设置拖拽框样式，注意设置position: absolute浮动状态。

听p #容器的鼠标按下事件，得到起始坐标。当鼠标被按下时，通过append()方法添加p#selectBox。

鼠标在按下事件后移动，并比较鼠标事件的当前位置。pagex和事件。添加p #选择框左上方坐标的页面

和尺寸宽度/高度。

remove()方法在鼠标离开p #容器或鼠标释放事件后移除p #选择框

收音机

监控li点击事件；

通过li子元素指向lebal。lebal子元素并通过toggleClass()修改背景样式(显示/取消选中)；

用这个指向li元素本身，用toggleClass()方法修改背景色；

多（前缀）

监控鼠标按下事件，按下时取消lebal和li现有的勾选样式；

听李说，鼠标在上面移动时，添加样式；

释放鼠标时，移除mouseover事件，使其不会继续被选中；

剩余问题

当拖拽速度快时，会遗漏一些文件，初步判断是代码执行效率低的问题

选择文件作为起点时，有时无法选择文件

如果短暂停留后可以选择文件，则初步判断代码执行效率较低

当您想要单击“检查”按钮时，您可以完成检查，但是单选按钮绑定的click事件与检查的mousedown事件冲突

点击检查按钮将触发鼠标向下的检查，消除选择风格和代码逻辑问题

复选框：的mousedown事件已被解决，以防止$('冒泡。lebal’)。bind ('mousedown '，function (event) {event。stop propagation()；})

如果拖动并选中360云盘复选框，然后将鼠标移开，将取消文件的选择，不清楚在哪里添加逻辑

源代码

index.html

！DOCTYPE htmlhtmlhead title/title脚本类型=' text/JavaScript ' src=' http : js/jquery-3 . 2 . 1 . js '/脚本脚本类型=' text/JavaScript ' src=' http : js/script . js '/脚本链接rel='样式表' type=' text/CSS ' href=' CSS/style . CSS ' rel='外部no follow '/Head body Div id=' container ' ul Li Div class=' Div Div class=' file _ name ' pdile list/p/Div/Li Li Div class=' lebal '标签/标签/Div class=' file _ name ' pdile list/p/Div/Li Li Div class=' lebal '标签/标签/Div class=' file _ name ' pdile list/p/Div/Li Li Div class=' lebal '标签/标签/Div class=' file _ name ' pdile list/p/Div/Li Li Div class=' lebal '标签/标签/Div class=' file '

* { margin : 0；padd : 0；}车身{ height : 700 pxborder : 1 px黑色固体；} # SelectBox {边框： 1px实心# 89d 9ff背景-color: rgba(137，217，255，0.5)；绝对位置：显示器：块；} #容器{ margin-top : 100px；边距-左侧： 200像素；宽度： 1200像素；高度： 600像素；border: 1px红色固体；-网络工具包-用户-选择：无；蚊子用户-选择：无；-ms-用户-选择：无；用户选择：无；} ul { margin : 20px } Li { width : 100%；高度： 40px边框-top: 1px #ddd实心；列表样式：无；}标签{background: url('./images/lebal.png ')不重复；背景-位置： 0 0;宽度： 15px高度： 15px余量： 12.5磅自动；显示器：块；}.toggleLebalClass {背景-位置： 0-52px；}.toggleLiClass { background : # eeeff；}.lebal { width: 40px高度： 40px向左浮动：}.file _ name { width : 80%；高度： 40px向左浮动：} p {行高： 40px}script.js

使用"严格";var x，y；$(function() { //点选$('li ').绑定(' click ')，函数(事件){ $(this).孩子们勒巴尔' .儿童()。toggle class(' toggle alclass ')；$(这个)。toggleClass(' toggleLiClass ')；});//复选$('.勒巴尔' .bind('mousedown '，function(event){ event。stopperpagation()；}) //拖选$(“# container”).鼠标向下(函数(事件){ x=事件。第x页；y=event.pageY$('#container ').追加(' div id=' SelectBox '/div ')；$('li ').孩子们勒巴尔' .儿童()。移除类(' ToggleLebalClass ')；$('li ').移除类(' toggleLiClass ')；$('li ').bind('mouseover '，function() { $(this).孩子们勒巴尔' .儿童()。添加类(' ToggleLebalClass ')；$(这个)。添加类(' toggleLiClass ')；});}).鼠标移动(函数（事件){ $('#selectBox ').css({ left: event.pageX x？x :事件。页面x，top:事件。佩吉。y : event.pageY，width : math。ABS(事件。pagex-x)，高度：数学。ABS(事件。pagey-y)})；}).mouseup(函数（事件){ $('#selectBox ').移除();$('li ').解除绑定(“鼠标悬停”)；})$(“# container”).mouseleave(函数(){ $('#selectBox ').移除();})});以上这篇Java脚本语言模拟文件拖选框样式v1.0的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。