js/jq仿窗户文件夹框选操作插件

0.先给大家看看效果：

1.创建一个index.html文件

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style ul { list-style : none } Li { width :200 px；余量：10pxfloat:left高度： 100像素；背景# cccborder: 1px实心# fff}。所选{border: 1px纯红}/样式脚本src='http:/jquery-1。12 .4 .量滴js/引入插件区域选择。射流研究…

（函数($){ $ .fn。区域选择=函数(选项){ var opt={} opt=$ .扩展（选择，选项);var _ this=$(this)；_this.on('mousedown '，函数{控制台。log(_ this)_ this。查找('李').removeClass(“”选定');var startTop=e . page yvar startLeft=e . page x变化端点，端点左侧；var selectBox=$(' div id=' select-box '/div ')；$(“正文”).追加（选择框);选择框。CSS({ ' position ' : ' absolute '，' top':startTop 'px '，' left':startLeft 'px '，' background':'rgba(255，106，23，0.3)'，' transition':'all 0s '，' width':0，' height':0，' z-index ' 3:10 })$(文档)。打开('鼠标移动'，函数(e){ e . prevent default()；endTop=e . pageyendleft=e . pagexif(e . Pagey-startTop 0 e . Pagex-startleft 0){ var height=e . Pagey-startTop；var width=e . pagex-startLeft；选择框。CSS({ ' width ' : width ' px '，' height ' : height ' px ' })} else if(e . pagey-startTop 0 e . pagex-startleft 0){ var height=-(e . pagey-startTop)；var width=-(e . pagex-startLeft)；选择框。CSS({ ' width ' : width ' px '，' height':height 'px '，' top':e.pageY 'px '，' left ' : e . pagex ' px ' })else if(e . pagey-startTop 0 e . pagex-startleft 0){ var height=(e . pagey-startTop)；var width=-(e . pagex-startLeft)；选择框。CSS({ ' width ' : width ' px '，' height':height 'px '，' top':startTop 'px '，' left ' : e . pagex ' px ' })else if(e . pagey-startTop 0 e . pagex-startleft 0){ var height=-(e . pagey-startTop)；var width=(e . pagex-startLeft)；选择框。CSS({ ' width ' : width ' px '，' height':height 'px '，' top':e.pageY 'px '，' left ' : start left ' px ' })} _ this。查找('李').每个（函数(){ if()(startLeft $(this)).偏移量()。左$(这个)。width() $(this).偏移量()。leftendLeft $(这个)。偏移量()。topendTop $(这个)。偏移量()。top $(这个)。height()startTop(e . pagey-startTop 0 e . pagex-startleft 0))| |(endLeft $(this).偏移量()。左$(这个)。width() $(this).偏移量()。leftstartLeft $(这个)。偏移量()。topstartTop $(这个)。偏移量()。top $(这个)。高度()结束顶部(e . pagey-start top 0 e . pagex-start left 0))| |(结束左侧$(this).偏移量()。左$(这个)。width() $(this).偏移量()。leftstartLeft $(这个)。偏移量()。topendTop $(这个)。偏移量()。top $(这个)。height()startTop(e . pagey-startTop 0 e . pagex-startLeft 0))| |(startLeft $(this).偏移量()。左$(这个)。width() $(this).偏移量()。leftendLeft $(这个)。偏移量()。topstartTop $(这个)。偏移量()。top $(这个)。height()end top(e . Pagey-start top 0 e . Pagex-start left 0)){ $(this).addClass(')选定');返回；}else { $(this).removeClass(“”选定');} }) }) $(文档)。on('mouseup '，function(){//if(opt。选择。do()；执行毁掉函数或者，钩子函数$(' #选择框')。移除();$(文档)。解除绑定(“鼠标移动”)；})})})))(jQuery)3 .调用插件

在index.html的身体最下面添加下面代码：

script $(function () { $(').测试')。区域选择()})/脚本打开index.html查看效果吧！

以上所述是小编给大家介绍的js/jq仿窗户文件夹框选操作插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！