富贵资源网 Design By www.hznty.com

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

1.先看下效果吧!

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

2.在添加一个index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <script src="/UploadFiles/2021-04-02/jquery-1.12.4.min.js">

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="/UploadFiles/2021-04-02/'+v.src+'">

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

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

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com