window對文件夾的操作主要包括移動/剪切/復制，本篇文章主要用jQuery來實現，下面一起來了解一下把。
1.先看下效果吧！
2.在添加一個index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./jquery-1.12.4.min.js"></script></head><style> ul{list-style: none;min-height: 100px;min-width: 100px;background: #eee;} li{width:200px;margin:10px;float:left;height: 200px;background: #ccc;border: 1px solid #fff;overflow: hidden} .selected{border: 1px solid red}</style><body> <ul class="test-box"> <div style="clear: both"></div> </ul> <ul class='clearfix test' > <li><img src="./defaultlogo.jpg" alt=""></li> <li><img src="./defaultlogo.jpg" alt=""></li> <li><img src="./defaultlogo.jpg" alt=""></li> <li><img src="./defaultlogo.jpg" alt=""></li> <li><img src="./defaultlogo.jpg" alt=""></li> <li><img src="./defaultlogo.jpg" alt=""></li> <li><img src="./defaultlogo.jpg" alt=""></li> <li><img src="./defaultlogo.jpg" alt=""></li> <li><img src="./defaultlogo.jpg" alt=""></li> <li><img src="./defaultlogo.jpg" alt=""></li> <li><img src="./defaultlogo.jpg" alt=""></li> <li><img src="./defaultlogo.jpg" alt=""></li> <li><img src="./defaultlogo.jpg" alt=""></li> <div style="clear: both"></div> </ul> </body></html>3.添加插件
上一篇文章里面有 areaSelect.js 框選插件，用于我們框選我們要移動的內容，沒有看的同志可以去上一篇復制過來。
添加 OptionFile 操作對象
var OptionFile=(function (opt) { var o={ width:100, // height:100, gapWidth:2 }; var o = $.extend(o,opt), _body=$('body'), boxBg='<div style="position: absolute;height: 100%;width: 100%;background: rgba(225,225,225,1);left: 0;top: 0;z-index: 1"></div>', movingBox='<div class="moving-box" style="width: '+o.width+'px;height: '+o.height+'px;box-sizing:border-box;position: absolute;z-index: 8888;"></div>'; return { actionLock:false, //移動鎖定 releaseTarget:false, //釋放鎖定 keyCode:null, //當前按鍵 鍵值 //鼠標按下操作 optionDown:function ( selectFile , type , evt ) { this.releaseTarget=false; this.getImgList(selectFile); var currentX=evt.pageX; var currentY=evt.pageY; $('.moving-box').css({ top:currentY+10, left:currentX+10 }) }, //鼠標移動操作 optionMoving:function (selectFile , type , evt ) { if(this.actionLock){ this.optionDown(selectFile , type , evt ); } }, getImgList:function (selectFile) { var length = selectFile .length, imgWidth = o.width-10-(length)*o.gapWidth, imgHeight = o.height-10-(length)*o.gapWidth; if(!this.actionLock){ _body.append(movingBox); $('.moving-box').append(boxBg); $.each(selectFile,function (k, v) { var img = '<img style="width:'+imgWidth+'px;height:'+imgHeight+'px;z-index:'+(k+2)+';position:absolute;right:'+(k+1)*o.gapWidth+'px;top:'+(k+1)*o.gapWidth+'px" src="'+v.src+'"/>'; $('.moving-box').append(img); }); } this.actionLock=true; }, //放開鼠標操作(回調函數，返回按鍵鍵值和當前目標) closeOption:function (func) { var _this= this; $(document).keydown(function (event) { _this.keyCode=event.keyCode; $(document).on('mouseup',function (e) { if(!_this.releaseTarget){ $('.moving-box').remove(); _this.actionLock=false; $(document).unbind('mousemove'); _this.releaseTarget=true; func(e,_this.keyCode); //返回當前 釋放的 目標元素 ， 和按鍵code $(document).unbind('keydown'); _this.keyCode=null; } }) }); $(document).trigger("keydown"); $(document).keyup(function (event){ $(document).unbind('keyup'); $(document).unbind('keydown'); _this.keyCode=null; }) } } })4.綁定函數和操作
$(function () { $(function () { $('.test').areaSelect() //框選操作 }) var optionImg= new OptionFile(); $('.test li').on("mousedown",function(e){ if($(this).hasClass('selected')) { e.preventDefault(); e.stopPropagation(); } var firstImg = $(this).find('img'), currentList=$('.test li.selected img'); //框選的圖片list，用于移動的時候顯示 currentList.push({src:firstImg.attr('src')}); //移動時候的第一張圖片 var loop = setTimeout(function () { optionImg.optionDown(currentList,1,e ); $(document).mousemove(function (e) { optionImg.optionMoving(currentList,1,e); optionImg.closeOption(function (e,keycode) { var target=$(e.target); //目標位置 可以判斷目標不同位置執行不同操作 console.log(keycode); //拖拽放開時候是否有按鍵 keycode 按鍵的值 可以通過不同的 keycode 來執行不同操作 target.prepend($('.test li.selected')) }); }); },200); $(document).mouseup(function () { clearTimeout(loop); }); });})OK！ 現在可以看效果了，插件可以自己擴張和修改。
上面 可以 keycode 不同按鍵值 完成不同的操作，如 移動、剪切、復制、粘貼等。。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
