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,在虚拟机下 ...

随机推荐

ACM_Appleman and Card Game（简单贪心）
Appleman and Card Game Time Limit: 2000/1000ms (Java/Others) Problem Description: Appleman has n car ...
【LeetCode】LeetCode Weekly Contest 16B
2.一个游戏 YouTube MIT 算法课上有详细的讲解思路是DP. 话说MIT OpenCourseWare 真心不错.应该好好看看,讲的详细生动. Tips: 1.当n是偶数的时候,首先的选择 ...
Ray Wenderlich 的 Objective-C编码规范
由于我正在准备模仿饿了么这个app,到时可能有些iOS开发者参与进来.这时如果每个人的Objective-C编码风格都不一样,这样不易于保持代码一致性和难以Code Review.所以我在网上搜索到 ...
Appium基于python unittest自动化测试并生成html测试报告
本文基于python单元测试框架unittest完成appium自动化测试,生成基于html可视化测试报告代码示例: #利用unittest并生成测试报告 class Appium_test(uni ...
Mysql导入导出大量数据的方法、备份恢复办法
经常使用PHP+Mysql的朋友一般都是通过phpmyadmin来管理数据库的.日常的一些调试开发工作,使用phpmyadmin确实很方便.但是当我们需要导出几百兆甚至几个G的数据库时,phpmyad ...
（转）全文检索技术学习(二)——配置Lucene的开发环境
http://blog.csdn.net/yerenyuan_pku/article/details/72589380 Lucene下载 Lucene是开发全文检索功能的工具包,可从官方网站http: ...
SDK _ 静态控件的使用
静态控件的使用静态控件主要区分两种使用方式:文本 \ 图片在使用静态控件的时候,ID始终默认为 IDC_STATIC,需要进行更改怎样通过可视化编程显示一张图片需要添加一个位图资源需要添加一 ...
CAD使用GetxDataLong读数据（网页版）
主要用到函数说明: MxDrawEntity::GetxDataLong2 读取一个Long扩展数据,详细说明如下: 参数说明 [in] LONG lItem 该值所在位置 [out, retval ...
安装svn
一.安装 1.查看是否安装cvs rpm -qa | grep subversion 2.安装 yum install subversion 3.测试是否安装成功 /usr/bin/svnserve ...
iOS的影片播放 MediaPlayer 和 AVPlayer
在iOS開發上,如果遇到需要播放影片,如開機動畫…,我們很習慣地會使用MediaPlayer來播放影片,因為很方便使用,所以就一直使用下去.但是隨著客戶的要求越來越嚴苛,尤其是過場動畫或互動效果上的表 ...

js/jq仿window文件夹移动/剪切/复制等操作

1.先看下效果吧！

2.在添加一个index.html

3.添加插件

4.绑定函数和操作

js/jq仿window文件夹移动/剪切/复制等操作的更多相关文章

随机推荐

热门专题