js和jq仿window資料夾移動、剪下、複製等操作實例講解-js教程-PHP中文網

首頁

web前端

js教程

js和jq仿window資料夾移動、剪下、複製等操作實例講解

小云云

Jan 23, 2018 am 09:37 AM

javascript window 資料夾

window對資料夾的操作主要包括移動/剪切/複製，本篇文章主要用jQuery來實現，下面一起來了解一下把。本文主要介紹了js/jq仿window資料夾移動/剪下/複製等操作程式碼，非常具有實用價值，需要的朋友可以參考下。希望能幫助大家。

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">

    <p style="clear: both"></p>

  </ul>

  <ul class=&#39;clearfix test&#39; >

    <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>

    <p style="clear: both"></p>

  </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=$(&#39;body&#39;),

        boxBg=&#39;<p style="position: absolute;height: 100%;width: 100%;background: rgba(225,225,225,1);left: 0;top: 0;z-index: 1"></p>&#39;,

        movingBox=&#39;<p class="moving-box" style="width: &#39;+o.width+&#39;px;height: &#39;+o.height+&#39;px;box-sizing:border-box;position: absolute;z-index: 8888;"></p>&#39;;

      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;

          $(&#39;.moving-box&#39;).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);

            $(&#39;.moving-box&#39;).append(boxBg);

            $.each(selectFile,function (k, v) {

              var img = &#39;<img style="width:&#39;+imgWidth+&#39;px;height:&#39;+imgHeight+&#39;px;z-index:&#39;+(k+2)+&#39;;position:absolute;right:&#39;+(k+1)*o.gapWidth+&#39;px;top:&#39;+(k+1)*o.gapWidth+&#39;px" src="&#39;+v.src+&#39;"/>&#39;;

              $(&#39;.moving-box&#39;).append(img);

            });

          }

          this.actionLock=true;

        },

        //放开鼠标操作(回调函数，返回按键键值和当前目标)

        closeOption:function (func) {

          var _this= this;

          $(document).keydown(function (event) {

            _this.keyCode=event.keyCode;

            $(document).on(&#39;mouseup&#39;,function (e) {

              if(!_this.releaseTarget){

                $(&#39;.moving-box&#39;).remove();

                _this.actionLock=false;

                $(document).unbind(&#39;mousemove&#39;);

                _this.releaseTarget=true;

                func(e,_this.keyCode);         //返回当前 释放的 目标元素 ， 和按键code

                $(document).unbind(&#39;keydown&#39;);

                _this.keyCode=null;

              }

            })

          });

          $(document).trigger("keydown");

          $(document).keyup(function (event){

            $(document).unbind(&#39;keyup&#39;);

            $(document).unbind(&#39;keydown&#39;);

            _this.keyCode=null;

          })

        }

      }

    })

登入後複製

4.綁定函數與動作

$(function () {

  $(function () {

    $(&#39;.test&#39;).areaSelect()  //框选操作

  })

   var optionImg= new OptionFile();

   $(&#39;.test li&#39;).on("mousedown",function(e){

     if($(this).hasClass(&#39;selected&#39;)) {

       e.preventDefault();

       e.stopPropagation();

     }

     var firstImg = $(this).find(&#39;img&#39;),

       currentList=$(&#39;.test li.selected img&#39;); //框选的图片list，用于移动的时候显示

     currentList.push({src:firstImg.attr(&#39;src&#39;)}); //移动时候的第一张图片

     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($(&#39;.test li.selected&#39;))

         });

       });

     },200);

     $(document).mouseup(function () {

       clearTimeout(loop);

     });

   });

})

登入後複製

#OK ！現在可以看效果了，外掛可以自己擴張修改。

上面可以 keycode 不同按鍵值完成不同的操作，如移動、剪下、複製、貼上等。。

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7814

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1237

Related knowledge

如何讓檔案自動複製到Windows 11/10上的另一個資料夾 Feb 19, 2024 am 11:24 AM

在本文中，我們將向您展示如何在Windows11/10上將檔案自動複製到另一個資料夾。建立備份是避免資料遺失所必需的。資料遺失可能會發生由於許多原因，如硬碟損壞，惡意軟體攻擊等，您可以透過使用複製和貼上方法或使用第三方工具手動備份資料。你知道你可以在Windows電腦上自動備份資料嗎？我們將在本文中向您展示如何做到這一點。如何讓檔案自動複製到Windows11/10上的另一個資料夾如何使用任務排程器在Windows11/10上自動複製檔案和資料夾到另一個目標資料夾？本文將為您提供詳細指導。請

您同步的資料夾中的一個或多個項目不符合Outlook錯誤 Mar 18, 2024 am 09:46 AM

當您在您的同步資料夾中發現一個或多個項目與Outlook中的錯誤訊息不符時，這可能是因為您更新或取消了會議項目。在這種情況下，您會看到一條錯誤訊息，提示您的本機資料版本與遠端副本有衝突。這種情況通常發生在Outlook桌面應用程式中。您同步的資料夾中的一個或多個項目不符。若要解決衝突，請開啟這些項目，然後重試此操作。修復同步的資料夾中的一個或多個項目不符合Outlook錯誤在Outlook桌面版中，當本機行事曆項目與伺服器副本發生衝突時，可能會遇到問題。不過，幸運的是，有一些簡單的方法可以幫助您

win11電腦資料夾設定密碼方法 Jan 12, 2024 pm 02:27 PM

更新了最新的win11系統之後，大部分的小夥伴都不清楚自己的資料夾該怎麼去加密保護隱私，因此我們為大家帶來了方法，一起看看win11電腦資料夾怎麼設定密碼吧。 win11電腦資料夾怎麼設定密碼：1.首先去找到要加密的資料夾。 2、然後右鍵點選這個資料夾，選擇「屬性」。 3、在點選屬性下面的「高級」。 4.勾選選單中的「加密內容以便保護資料」並點選確定。 5.最後回到資料夾的屬性，在彈出的視窗中點選「確定」即可。

C磁碟機中有兩個Windows資料夾；我該怎麼辦？ Mar 06, 2024 am 11:55 AM

Windows資料夾包含Windows作業系統，是Windows電腦中的重要資料夾。預設情況下，Windows安裝在C碟上。因此，C是Windows資料夾的預設目錄。每台Windows計算機都有一個Windows資料夾。然而，一些用戶報告說，在C盤中發現了兩個Windows資料夾。在這篇文章中，我們將解釋如果你遇到這樣的情況你可以做些什麼。 C盤中的兩個Windows資料夾在C盤中有兩個Windows資料夾的情況很少見。然而，如果你遇到這樣的情況，你可以使用以下建議：執行反惡意軟體掃描嘗試找出正確

尋找win11桌布的預設資料夾路徑及分享詳情 Jan 30, 2024 pm 03:15 PM

很多的用戶在使用電腦的時候都會更換壁紙，相信也有不少的用戶在詢問win11壁紙在哪個文件夾？系統自備的壁紙在C盤下的Wallpaper，用戶們自己存的壁紙在c盤的Themes文件夾，下面就讓本站來為用戶們來仔細的介紹一下win11默認壁紙路徑分享吧。 win11預設桌布路徑分享一、系統自備桌布：1、先進入我的電腦，然後依序開啟路徑：C：WindowsWebWallpaper。二、用戶自存桌布：1.用戶自己安裝的桌布都會儲存在：C：Users（用戶）xx（目前用戶名）AppDataLocalM

如何在真我手機上建立資料夾？ Mar 23, 2024 pm 02:30 PM

標題：真我手機新手指南：如何在真我手機上建立資料夾？在現今社會，手機已成為人們生活中不可或缺的工具。而真我手機作為一款備受歡迎的智慧型手機品牌，其簡潔、實用的作業系統備受用戶喜愛。在使用真實我手機的過程中，很多人可能會遇到需要整理手機中的檔案和應用程式的情況，而建立資料夾就是一種有效的方式。本文將介紹如何在真我手機上建立資料夾，幫助使用者更好地管理自己的手機內容。第

win10資料夾設定密碼保護怎麼設定 Feb 29, 2024 am 09:00 AM

在使用win10系統的時候，有很多人都會擔心電腦中的機密文件洩露，其實用戶只需要利用win10資料夾密碼保護功能就能解決這個問題，今天小編幫助大家開啟這個功能。 win10資料夾設定密碼保護怎麼設定1、首先需要選擇想要加密的資料夾，右鍵該資料夾，在彈出的選項列中點選屬性。 2、在屬性介面中，點選右下角的進階選項。 3.進入進階屬性介面中，選擇加密內容以便保護資料前的勾選框，然後點選確定4、接著系統會自動彈出確認屬性變更介面，點選介面中的確定。 5.這樣密碼保護就成功設定了，使用原始帳號時不會受到任何影響

Windows 11 資料夾共用指南：輕鬆分享你的檔案和資料 Mar 13, 2024 am 11:49 AM

在日常生活和工作中，我們經常需要在不同裝置之間共用檔案和資料夾。 Windows11系統提供了方便的內建資料夾共用功能，讓我們可以輕鬆地在同一網路內安全地與他人分享所需內容，同時保護個人檔案的隱私。這項功能使文件共享變得簡單而高效，不必擔心洩露私人資訊。透過Windows11系統的資料夾共享功能，我們可以更方便地進行合作、交流和協作，提高工作效率和生活便利性。為了順利配置共用資料夾，我們首先需要滿足以下條件：所有（參與共享的）設備都連接到同一個網路。啟用「網路發現」並配置好共享。知道目標設備中的

See all articles

js和jq仿window資料夾移動、剪下、複製等操作實例講解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題