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


Posted in Javascript onMarch 08, 2017

window对文件夹的操作主要包括移动/剪切/复制,本篇文章主要用jQuery来实现,下面一起来了解一下把。

1.先看下效果吧!

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

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 不同按键值  完成不同的操作,如 移动、剪切、复制、粘贴等。。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
jquery仿ps颜色拾取功能
Mar 08 #Javascript
关于Javascript中document.cookie的使用
Mar 08 #Javascript
JavaScript中transform实现数字翻页效果
Mar 08 #Javascript
vue动态组件实现选项卡切换效果
Mar 08 #Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 #Javascript
Vue.js组件tab实现选项卡切换
Mar 23 #Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 #Javascript
You might like
实用函数8
2007/11/08 PHP
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
vue实现分页栏效果
2019/06/28 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
pymysql模块的操作实例
2019/12/17 Python
python实现简单井字棋小游戏
2020/03/05 Python
大学生社会实践自我鉴定
2014/03/24 职场文书
难忘的一课教学反思
2014/04/30 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
vue首次渲染全过程
2021/04/21 Vue.js