suchen

Heim >Web-Frontend >js-Tutorial >Beispiele für Vorgänge wie das Verschieben, Ausschneiden und Kopieren imitierter Fensterordner mit js und jq

Beispiele für Vorgänge wie das Verschieben, Ausschneiden und Kopieren imitierter Fensterordner mit js und jq

小云云
小云云Original
2018-01-23 09:37:001728Durchsuche

Fensteroperationen für Ordner umfassen hauptsächlich das Verschieben/Ausschneiden/Kopieren. In diesem Artikel wird hauptsächlich jQuery verwendet. Lassen Sie uns gemeinsam etwas darüber lernen. In diesem Artikel werden hauptsächlich das Verschieben/Ausschneiden/Kopieren von js/jq-Fensterordnern und andere Operationscodes vorgestellt. Er ist von großem praktischem Wert und Freunde in Not können darauf zurückgreifen. Ich hoffe, es hilft allen.

1. Schauen wir uns zunächst die Wirkung an!

2. Fügen Sie ein index.html hinzu 


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

Der vorherige Artikel enthält das Feldauswahl-Plug-in „areaSelect.js“, mit dem der Inhalt ausgewählt wird, den wir verschieben möchten. Wer es nicht gelesen hat, kann es aus dem vorherigen Artikel kopieren.

OptionFile-Operationsobjekt hinzufügen


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. Funktionen und Operationen binden


$(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! Jetzt können Sie den Effekt sehen, das Plug-In kann von selbst erweitert und geändert werden.


Das Obige kann verschiedene Schlüsselwerte kodieren, um verschiedene Vorgänge wie Verschieben, Ausschneiden, Kopieren, Einfügen usw. abzuschließen. .


Verwandte Empfehlungen:

js, um den Kalendereffekt eines nachgeahmten Fenstersystems zu erzielen

Nachahmung des Windows-Traversalverzeichnisses

JS imitiert die spezifische Implementierung des Windows-Algorithmus zum Anordnen von Desktopsymbolen (mit Bildern)_Javascript-Fähigkeiten


Das obige ist der detaillierte Inhalt vonBeispiele für Vorgänge wie das Verschieben, Ausschneiden und Kopieren imitierter Fensterordner mit js und jq. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HighCharts zeichnet ein 2D-Liniendiagramm mit Beispielfreigabe für den BeschriftungseffektNächster Artikel：HighCharts zeichnet ein 2D-Liniendiagramm mit Beispielfreigabe für den Beschriftungseffekt

In Verbindung stehende Artikel

Mehr sehen