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

随机推荐

E - Cheap Kangaroo（求多个数的最大公约数）
Description There are N kangaroos going out to eat at an Indian restaurant. The ith kangaroo wants t ...
Spring抽象JDBC，使用JdbcTemplate
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
275 H-Index II H指数 II
这是 H指数进阶问题:如果citations 是升序的会怎样?你可以优化你的算法吗? 详见:https://leetcode.com/problems/h-index-ii/description/ ...
小白的python之路序
计算机专科毕业,.net开发已有8年有余,中途断断续续,似懂非懂,积累了一些经验知识,但是不求甚解,属于那种一瓶不满半瓶子晃荡,这么一个状态. 主要从事web开发,涉及一些前端jq等,还有接口开发,搜 ...
dubbo与springmvc的简单使用
什么是Dubbo? dubbo是阿里巴巴公司开源的高性能优秀服务框架,通过高性能的RPC(远程服务调用)实现服务的输入输出功能,可以与spring框架无缝整合: 传统的架构所有的模块都在一台服务器上, ...
Java 创建Excel并逐行写入数据
package com.xxx.common.excel; import java.io.File; import java.io.FileInputStream; import java.io.Fi ...
html与html5 总结
时间:于2017年12月3日 19:35:18开始用于: 这文章用于个人技术总结(全文转发请标明出处,小段摘抄随意) HTML笔记1.html标签不区分大小写,但是建议小写2.常用标签: 可用在he ...
android 蓝牙开发---与蓝牙模块进行通讯基于eclipse项目
2017.10.20 之前参加一个大三学长的创业项目,做一个智能的车锁App,用到嵌入式等技术,App需要蓝牙.实时位置等技术,故查了几篇相关技术文章,以此参考! //先说 ...
IDEA提示 found duplicate code
原因: IntelliJ IDEA提示Found duplicated code in this file 这不是我们代码错误,而是idea提示说我们的代码有重复,在项目的其他地方有同样的代码片段解 ...
Qt 杂记——QTableWidget列表添加、删除（备份）
1.列表的添加需求:向一个有两列的Table中添加一条数据思路:新建一个inputDialog,通过按钮打开Qt自带的inputDialog,传递回输入的数据,再添加到列表中界面: 代码: in ...

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

1.先看下效果吧！

2.在添加一个index.html

3.添加插件

4.绑定函数和操作

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

随机推荐

热门专题