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

随机推荐

leetcode126 Word Ladder II
思路: 宽搜过程中分层记录路径,递归还原.实现: class Solution { public: void getPath(string now, string beginWord, string ...
Selenium常用方法及函数
新建实例driver = webdriver.Chrome() 1.获取当前页面Url的函数方法:current_url实例:driver.current_url 2.表单的提交方法:submit解释 ...
Angular——MVC模式开发实战
创建项目创建工作目录使用bower下载需要插件 git init.add.commit之后得到分支master,再创建developer分支,然后再此分支上进行具体功能开发 MVC架构之前小项目 ...
angular 琐碎
1.controller 只要在一个地方引用就可以了,路由的时候不用指定controller了,在HTML中指定就可以了,否则会初始化两次 2.angular 模块间的服务无层级关系,相互可见.本质是 ...
Vue指令3：v-for
列表渲染我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名. & ...
ThinkPHP---layer插件
[概论] (1)layer是基于jquery开发的一款美化弹框的插件,主要用于弹框效果的交互.但其他功能和组件也日益完善官网:http://layer.layui.com 在线手册:http://w ...
15 AJAX
AJAX AJAX 简介 AJAX 是异步 JavaScript 及 XML(Asynchronous JavaScript and XML)的缩写.AJAX 不是一种新的编程语言,而是一种用于创 ...
thymeleaf的使用及配置
* th:action <form id="login" th:action="@{/login}">......</form> ...
在TWaver的Tree节点上画线
论坛上有同学提出如何在tree上画引导线,之前我们Flex已经实现此功能,现在最新版的HTML5也将添加此功能.先看看效果:详细的使用方法可以参考我们开发手册中可视化视图组件#Tree引导线一章,下面 ...
Python json & pickle & shelve模块
json & pickle 之前我们学习过用eval内置方法可以将一个字符串转成python对象,不过,eval方法是有局限性的,对于普通的数据类型,json.loads和eval都能用,但遇 ...

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

1.先看下效果吧！

2.在添加一个index.html

3.添加插件

4.绑定函数和操作

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

随机推荐

热门专题