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 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
原生js实现表格翻页和跳转
Sep 29 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
javascript知识点收藏
2007/02/22 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Python中常用的内置方法
2019/01/28 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
小学一年级评语大全
2014/04/22 职场文书
新店开张活动方案
2014/08/24 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
Python 正则模块详情
2021/11/02 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL