js、jqを使った模造窓フォルダの移動、切り取り、コピーなどの操作例-jsチュートリアル-php.cn

js、jqを使った模造窓フォルダの移動、切り取り、コピーなどの操作例

小云云

リリース： 2018-01-23 09:37:00

オリジナル

1726 人が閲覧しました

フォルダーに対するウィンドウ操作には主に移動・切り取り・コピーが含まれます。この記事では主にjQueryを使って実装していきます。この記事では主に js/jq の模倣ウィンドウのフォルダーの移動/切り取り/コピーなどの操作コードを紹介します。必要な方は参考にしてください。皆さんのお役に立てれば幸いです。

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!これで効果が確認でき、プラグインを単独で拡張および変更できるようになります。

上記は、移動、切り取り、コピー、貼り付けなどのさまざまな操作を完了するために、さまざまなキー値をキーコード化できます。。

関連する推奨事項: ウィンドウシステムのカレンダー効果を模倣する

Windows トラバーサルディレクトリを模倣する

Windows デスクトップアイコン配置アルゴリズムの特定の実装を模倣する (画像付き)_JavaScript スキル

🎜

以上がjs、jqを使った模造窓フォルダの移動、切り取り、コピーなどの操作例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。