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

最新推荐文章于 2020-03-21 21:07:23 发布
最新推荐文章于 2020-03-21 21:07:23 发布
阅读量604 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38323724/article/details/84967777
版权
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/　

qq_38323724
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS,JS - 仿windows资源管理器选择框
qq_24296409的博客
06-19 696
模仿Windows的文件选择框，使用Javascript和CSS完成。
jQuery easyui 创建仿Windows界面
最新发布
oldhelps的CSDN博客
08-07 380
jQuery easyui 创建仿Windows界面
jQuery仿Windows系统文件夹目录操作代码.zip
05-20
jQuery仿Windows系统文件夹目录操作代码，来自资源搜索。
js/jq仿window文件夹移动/剪切/复制等操作代码
12-12
window对文件夹的操作主要包括移动/剪切/复制，本篇文章主要用jQuery来实现，下面一起来了解一下把。 1.先看下效果吧！ 2.在添加一个index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> [removed][removed] </head> <style> ul{list-style: none;min-height: 100px;min-width: 100px;back
jQuery网页版Win文件夹目录代码.zip
07-04
jQuery网页版Win文件夹目录代码是一款单机显示文件名和文件类型，双击打开文件夹效果。
jQuery仿Windows桌面点击双击代码.zip
07-05
jQuery仿Windows桌面点击双击代码，支持右键菜单编辑操作功能代码。
js/jq仿window文件夹框选操作插件
10-20
通过以上分析，我们可以看出，js/jq仿window文件夹框选操作插件是一种提高用户交互性的实用工具，它使得用户能像在操作系统中一样方便地对网页上的元素进行批量选择。结合适当的优化和扩展，这种插件可以广泛应用于...
JQselect.rar_JavaScript/JQuery_Java_
08-11
在实际的Web应用中，后端（通常使用Java）负责处理业务逻辑和数据存储，而前端（JavaScript/jQuery）则负责展示数据和用户交互。通过Ajax技术，前端可以异步地从服务器获取或提交数据，实现无刷新的数据更新。因此，...
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
12-09
前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。 ztree官方文档：http://www.treejs.cn/v3/api.php 想要实现的效果： 需要的功能： 1：首先实现一颗jQuery的ztree的树形菜单，这个很简单，直接引用官方文档即可 2：点击新建组的按钮，会出现一个input对话框，填写想要新建的名称，在树形菜单上添加了一个父节点菜单。 3：可以把其他父节点里面的子节点元素拖动到刚刚新建的父节点里面。 下面开始撸代码： 1：首先要引入一些必
ajax实现的仿windows浏览文件夹
12-29
ajax实现的仿windows浏览文件夹，可进行删除等操作，具体应用的时候可以在操作之前加上权限判断
仿windows资源管理器风格的jQuery复选框美化插件
12-11
folderselect.js是一款仿windows资源管理器风格的jQuery复选框美化插件。它能够以文件夹的形式来显示分层的数据结构，它还支持AJAX数据调用，事件回调，数据头等。
jQuery UI实现模仿windows操作系统桌面特效代码.zip
07-04
jQuery UI实现模仿windows操作系统桌面特效代码
jQuery文件夹创建删除修改代码.zip
07-04
JQuery文件夹创建删除修改代码是一款右键菜单栏功能，live绑定事件的运用。
仿桌面文件夹窗口web
11-18
首先强调，页面是aspx,可以自行转成html。 1、本后台模板为原创 2、代码简洁，基于jquery 3、框架窗口实现可拖可拽，自由获取焦点切换 4、并附有状态栏可实现切换 5、完美解决因iframe内页无法获取焦点问题 6、适合初学者学习布局与js学习带注释 7、有BUG欢迎留言，大家一起探讨学习
用Windows文件夹演示JS复杂数据类型的深浅拷贝
WYCWLMY的博客
03-21 151
用Windows文件夹演示JS复杂数据类型的深浅拷贝 前言 在逆战班对JavaScript学习了近10天后，我开始接触到JavaScript中一个比较重要的数据类型——数组。在学习数组的过程中，我接触了浅拷贝和深拷贝两个概念，为了便于自己和其他有需要的小白更容易理解深浅拷贝之间的关系，我打算用我们常用的Windows文件夹来模拟讲解一下深浅拷贝。 堆和栈的模拟 首先，我们需要明白：计算机的数据存储...
学习笔记- 查看一个文件夹下的文件及文件夹，仿Windows资源管理器
gfdonx的专栏
09-29 600
public static void main(String[] args) { // TODO Auto-generated method stub String path = "D:\\EA7.5\\"; File file = new File(path); System.out.printf("文件\t\t\t\t大小\t类型\t修改日期\t",""); S
HTML/CSS/JS/JQ入门教程：Web开发基石
3. 超链接`<a>`标签，表格`<table>`，以及表单元素如文本框、密码框、单选、多选、时间选择、文件上传、下拉菜单、文本域和隐藏域等都被详细讲解。 **CSS部分**（day03-05）： 1. CSS被引入以控制网页样式，学习了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值