js/jq仿window文件夹移动/剪切/复制等操作
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 不同按键值 完成不同的操作，如 移动、剪切、复制、粘贴等。。
个人博客 ：很多好用的 npm 包 ， 可以看看 https://gilea.cn/
js/jq仿window文件夹移动/剪切/复制等操作的更多相关文章
- js/jq仿window文件夹框选操作插件
0.先给大家看看效果: 1.创建一个index.html文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...
- jq和js插件的各个文件夹里放置的内容
1. demo文件夹,存放各种实例. 2. dist文件夹,全称是distribution.在某些框架中,因为开发和发布的内容或者代码形式是不一样的(比如利用Grunt压缩等等),这时候就需要一个存放 ...
- java+js实现展示本地文件夹下的所有图片demo[申明：来源于网络]
java+js实现展示本地文件夹下的所有图片demo[申明:来源于网络] 地址:http://blog.csdn.net/allgis/article/details/46364875
- js上传整个文件夹
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- js能否上传文件夹
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- Java IO实现文件（及文件夹）的复制 原创代码【精】
单个文件复制 FileInputStream input=new FileInputStream("C://360//fay.jpg"); FileOutputStream out ...
- 极简 Node.js 入门 - 3.4 文件夹写入
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - 3.5 文件夹操作
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- VMware下linux与window文件夹共享
这里说的是在虚拟机下来实现在windows下共享一个文件夹. 下面来说明一下是如何实现的: 1． 安装VMware.Workstation. 2． 安装Redhat Linux 9.0,在虚拟机下 ...
随机推荐
- 简单的css缩放动画,仿腾讯新闻的分享按钮和美团app底部的图标样式
最近看到一些好看的hover的图形缩放效果.然后自己就写了下,发现这2种效果都不错.如果伙伴们更好的实现方式可以在下面留言哦~ 还有美团的效果,我就不展示了,喜欢的可以去app应用上看看. 这两种效果 ...
- Android setOnPageChangeListener 过时了怎么办？
今天使用ViewPager发现setOnPageChangeListener的方法居然过期了,而且AS编译不通过了,最后查了一下原来把set换成add了,代码如下: setOnPageChangeLi ...
- XAMPP--Apache服务无法启动问题定位及处理
一.问题简述: XAMPP 在使用一段时间后,Apache服务无法启动. 二.详细描述: 安装Xampp服务器套件之后,部署使用正常.一段时间未使用,再次打开时,Apache服务无法启动.错误提示如下 ...
- Git——github高级
分支管理 分支不是越多越好,只求一个稳定的分支,即master不要轻易去更改 对应master要有一个开发者分支,保证mater分支的稳定性 所有的功能都在开发者分支上进行 在所有功能开发后新建发布分 ...
- treetable adding nodes at root level
describe("loadBranch()", function() { beforeEach(function() { this.newRows = " ...
- HDU_6017_Girls love 233_(dp)(记忆化搜索)
Girls Love 233 Accepts: 30 Submissions: 218 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: ...
- 文件和打印共享资源(IP地址)处于联机状态，但未对连接尝试做出响应。
文件和打印共享资源(IP地址)处于联机状态,但未对连接尝试做出响应. 检测到 远程计算机不接受端口 445 上的连接,这可能是由于防火墙或安全策略设置,或因为服务可能暂时不可用.Windows 在计算 ...
- TypeError: 'TestCase' object is not iterable
这个异常呢其实是因为我对list没有足够熟悉 我一开始很疑惑,明明已经正确返回testcase对象了呀,为啥会报TypeError: 'TestCase' object is not iterable ...
- Nginx 通过 certbot 为网站自动配置 SSL 证书并续期
一.背景知识 1.1.http 和 https 是什么? 简单来说,http 是一个传输网页内容的协议,比如你看到的 http 开头的网站 http://www.163.com ,其网页上的文字.图片 ...
- RabbitMQ系列(二)--基础组件
声明:对于RabbitMQ的学习基于某课网相关视频和<RabbitMQ实战指南>一书,后续关于RabbitMQ的博客都是基于二者 一.什么是RabbitMQ RabbitMQ是开源代理和队 ...