window对文件夹的操作主要包括移动/剪切/复制，本篇文章主要用jquery来实现，下面一起来了解一下把。本文主要介绍了js/jq仿window文件夹移动/剪切/复制等操作代码，非常具有实用价值，需要的朋友可以参考下。希望能帮助到大家。
1.先看下效果吧！
2.在添加一个index.html
nbsp;html>Title 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}
登录后复制
3.添加插件
上一篇文章里面有 areaSelect.js 框选插件，用于我们框选我们要移动的内容，没有看的同志可以去上一篇复制过来。
添加 OptionFile 操作对象
var OptionFile=(function (opt) { var o={ width:100, // height:100, gapWidth:2 }; var o = $.extend(o,opt), _body=$('body'), boxBg='', movingBox=''; 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 = '![js和jq仿window文件夹移动、剪切、复制等操作实例讲解]()
![js和jq仿window文件夹移动、剪切、复制等操作实例讲解]()
'; $('.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 不同按键值 完成不同的操作，如 移动、剪切、复制、粘贴等。。
相关推荐：
js实现仿window系统日历效果
仿windows遍历目录
js模仿windows桌面图标排列算法具体实现(附图)_javascript技巧
以上就是js和jq仿window文件夹移动、剪切、复制等操作实例讲解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789631.html
