快捷導航

js/jq仿window文件夾移動/剪切/復制等操作代碼

更新時間：2017年03月08日 14:09:43 作者：小結(jié)巴巴吧

本篇文章主要介紹了js/jq仿window文件夾移動/剪切/復制等操作代碼，非常具有實用價值，需要的朋友可以參考下。

window對文件夾的操作主要包括移動/剪切/復制，本篇文章主要用jQuery來實現(xiàn)，下面一起來了解一下把。

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 框選插件，用于我們框選我們要移動的內(nèi)容，沒有看的同志可以去上一篇復制過來。

添加 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;

        },

        //放開鼠標操作(回調(diào)函數(shù)，返回按鍵鍵值和當前目標)

        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.綁定函數(shù)和操作

$(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);  //目標位置 可以判斷目標不同位置執(zhí)行不同操作

           console.log(keycode);   //拖拽放開時候是否有按鍵 keycode 按鍵的值  可以通過不同的 keycode 來執(zhí)行不同操作

           target.prepend($('.test li.selected'))

         });

       });

     },200);

     $(document).mouseup(function () {

       clearTimeout(loop);

     });

   });

})

OK！現(xiàn)在可以看效果了，插件可以自己擴張和修改。

上面可以 keycode 不同按鍵值完成不同的操作，如移動、剪切、復制、粘貼等。。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: