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

2024-10-16 10:13:56

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

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

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

js/jq仿window文件夹框选操作插件

0.先给大家看看效果: 1.创建一个index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul{list-style: none} li{width:200px;margin:10px;float:left;height: 100
javascript 选择文件夹对话框(web)

没有办法,实践证明最好的解决办法是自己写一个OCX控件,这样就只要注册一下OCX控件就可以了,同时OCX控件的可扩展性非常大,也就是给vc\delphi这些程序的功能引入到web中,其功能可想而知! 这里不说明OCX开发的过程了,给自己写的OCX控件共享一下,希望能给一些朋友提供帮助. 这个OCX控件中提供了一个getFiles()方法,只要获取控件对象,然后调用getFiles()方法就可以获取对应路径下的所有文件,如下图: 该控件可以选择任意盘符下的任意文件夹,图中最下面的按钮时web中的i
js模拟电脑选择多文件夹效果_选区代码

代码很简单,会继续完善... 按住鼠标键不动,拖动鼠标,会看到效果 body{padding:100px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:10px;margin-bottom:10px;} .seled{border:1px solid #ff0000;bac
JavaScript中使用ActiveXObject操作本地文件夹的方法

在Windows平台上, js可以调用很多Windows提供的ActivexObject,本文就使用js来实现文档处理, 和使用js编写ActiveX做一个简单介绍. 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <t
Javascript 文件夹选择框的两种解决方案

解决方案1: 调用windows 的shell,但会有安全问题. * browseFolder.js * 该文件定义了BrowseFolder()函数,它将提供一个文件夹选择对话框 * 以供用户实现对系统文件夹选择的功能 * 文件夹选择对话框起始目录由 * Shell.BrowseForFolder(WINDOW_HANDLE, Message, OPTIONS, strPath)函数 * 的strPath参数设置 * 例如:0x11--我的电脑 * 0 --桌面 * "c:\\"--
Node.js查找当前目录下文件夹实例代码

整理文档,搜刮出Node.js查找当前目录下文件夹实例代码,稍微整理精简一下做下分享. var http = require("http"); var fs = require("fs"); var server = http.createServer(function (req,res) { //不处理收藏夹小图标 if(req.url == "/favicon.ico"){ return; } //files是文件名的数组表示text这个文
js操作IE浏览器弹出浏览文件夹可以返回目录路径

如图所示: 可以返回目录路径. 操作如下: function BrowseFolder(){ try{ var Message = "请选择文件夹"; //选择框提示信息 var Shell = new ActiveXObject( "Shell.Application" ); var Folder = Shell.BrowseForFolder(0,Message,0x0040,0x11);//起始目录为:我的电脑 //var Folder = Shell.Bro
js 浏览本地文件夹系统示例代码

复制代码代码如下: function BrowseFolder(){ try{ var Message = "请选择文件夹"; //选择框提示信息 var Shell = new ActiveXObject( "Shell.Application" ); var Folder = Shell.BrowseForFolder(0,Message,0x0040,0x11);//起始目录为:我的电脑 //var Folder = Shell.BrowseForFolde
javascript 系统文件夹文件操作及参数介绍

前期在.net 下进行系统操作,同样的功能实现起来非常复杂,没想到用javascript竟然如此简单,所以在网上搜索了代码并加以改进. 复制代码代码如下: function PathList(path) { var fso = new ActiveXObject("Scripting.FileSystemObject"); var fldr = fso.GetFolder(path); var fd = new Enumerator(fldr.SubFolders); for (;
JS实现新建文件夹功能

每天一个JS 小demo之新建文件夹.主要知识点:DOM方法的综合运用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { margin: 0; } header { border-

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

相关推荐

随机推荐