Beispiele für Vorgänge wie das Verschieben, Ausschneiden und Kopieren imitierter Fensterordner mit js und jq-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

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

小云云

Jan 23, 2018 am 09:37 AM

javascript window 文件夹

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>

Nach dem Login kopieren

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;

          })

        }

      }

    })

Nach dem Login kopieren

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

     });

   });

})

Nach dem Login kopieren

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!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7467

CakePHP-Tutorial

1376

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

So lassen Sie Dateien unter Windows 11/10 automatisch in einen anderen Ordner kopieren Feb 19, 2024 am 11:24 AM

In diesem Artikel zeigen wir Ihnen, wie Sie unter Windows 11/10 Dateien automatisch in einen anderen Ordner kopieren. Um Datenverluste zu vermeiden, ist die Erstellung von Backups erforderlich. Datenverlust kann aus vielen Gründen auftreten, wie z. B. Festplattenbeschädigung, Malware-Angriff usw. Sie können Ihre Daten manuell sichern, indem Sie die Kopier- und Einfügemethode verwenden oder Tools von Drittanbietern verwenden. Wussten Sie, dass Sie Daten auf Ihrem Windows-Computer automatisch sichern können? Wie das geht, zeigen wir Ihnen in diesem Artikel. So kopieren Sie Dateien automatisch in einen anderen Ordner unter Windows 11/10. Wie verwende ich den Taskplaner, um Dateien und Ordner automatisch in einen anderen Zielordner unter Windows 11/10 zu kopieren? Dieser Artikel bietet Ihnen eine detaillierte Anleitung. Bitte

So legen Sie ein Passwort für den Win11-Computerordner fest Jan 12, 2024 pm 02:27 PM

Nach dem Update auf das neueste Win11-System wissen die meisten Freunde nicht, wie sie ihre Ordner zum Schutz der Privatsphäre verschlüsseln sollen. Deshalb haben wir Ihnen eine Methode vorgestellt, wie Sie ein Passwort für einen Win11-Computerordner festlegen. So legen Sie ein Passwort für einen Win11-Computerordner fest: 1. Suchen Sie zunächst den Ordner, den Sie verschlüsseln möchten. 2. Klicken Sie dann mit der rechten Maustaste auf den Ordner und wählen Sie „Eigenschaften“. 3. Klicken Sie unter Eigenschaften auf „Erweitert“. 4. Aktivieren Sie im Menü „Inhalt verschlüsseln, um Daten zu schützen“ und klicken Sie auf „OK“. 5. Kehren Sie abschließend zu den Eigenschaften des Ordners zurück und klicken Sie im Popup-Fenster auf „OK“.

Mar 18, 2024 am 09:46 AM

Wenn Sie feststellen, dass ein oder mehrere Elemente in Ihrem Synchronisierungsordner nicht mit der Fehlermeldung in Outlook übereinstimmen, kann dies daran liegen, dass Sie Besprechungselemente aktualisiert oder abgesagt haben. In diesem Fall wird eine Fehlermeldung angezeigt, die besagt, dass Ihre lokale Version der Daten mit der Remote-Kopie in Konflikt steht. Diese Situation tritt normalerweise in der Outlook-Desktopanwendung auf. Ein oder mehrere Elemente in dem von Ihnen synchronisierten Ordner stimmen nicht überein. Um den Konflikt zu lösen, öffnen Sie die Projekte und versuchen Sie den Vorgang erneut. Fix Ein oder mehrere Elemente in synchronisierten Ordnern stimmen nicht mit dem Outlook-Fehler überein. In der Outlook-Desktopversion können Probleme auftreten, wenn lokale Kalenderelemente mit der Serverkopie in Konflikt stehen. Glücklicherweise gibt es jedoch einige einfache Möglichkeiten, um zu helfen

Suchen Sie den Standardordnerpfad und die Freigabedetails von Win11-Hintergrundbildern Jan 30, 2024 pm 03:15 PM

Viele Benutzer ändern das Hintergrundbild, wenn sie ihren Computer verwenden. Ich glaube, viele Benutzer fragen sich auch, in welchem Ordner sich die Win11-Hintergrundbilder befinden. Die mit dem System gelieferten Hintergrundbilder befinden sich im Hintergrundbild unter dem Laufwerk C, und die von Benutzern gespeicherten Hintergrundbilder befinden sich im Themenordner des Laufwerks C. Lassen Sie diese Site die Win11-Standard-Hintergrundpfadfreigabe für Benutzer sorgfältig vorstellen. Teilen Sie den Win11-Standard-Hintergrundpfad 1. Das System wird mit einem Hintergrundbild geliefert: 1. Geben Sie zuerst meinen Computer ein und öffnen Sie dann den Pfad: C: Windows Web Wallpaper. 2. Vom Benutzer gespeicherte Hintergrundbilder: 1. Von Benutzern installierte Hintergrundbilder werden gespeichert in: C: Benutzer (Benutzer) xx (aktueller Benutzername) AppDataLocalM

Auf dem Laufwerk C befinden sich zwei Windows-Ordner. Was soll ich tun? Mar 06, 2024 am 11:55 AM

Der Windows-Ordner enthält das Windows-Betriebssystem und ist ein wichtiger Ordner auf einem Windows-Computer. Standardmäßig ist Windows auf dem Laufwerk C installiert. Daher ist C das Standardverzeichnis für Windows-Ordner. Jeder Windows-Computer verfügt über einen Windows-Ordner. Einige Benutzer berichteten jedoch, dass auf dem Laufwerk C zwei Windows-Ordner gefunden wurden. In diesem Artikel erklären wir Ihnen, was Sie tun können, wenn Sie in eine solche Situation geraten. Zwei Windows-Ordner im Laufwerk C: Es kommt selten vor, dass sich im Laufwerk C: zwei Windows-Ordner befinden. Wenn Sie jedoch auf eine solche Situation stoßen, können Sie die folgenden Vorschläge verwenden: Führen Sie einen Anti-Malware-Scan durch, um zu versuchen, das Richtige zu finden

So legen Sie den Passwortschutz für den Win10-Ordner fest Feb 29, 2024 am 09:00 AM

Bei der Verwendung des Win10-Systems sind viele Menschen besorgt über den Verlust vertraulicher Dateien auf dem Computer. Tatsächlich müssen Benutzer nur die Funktion zum Schutz von Win10-Ordnern verwenden, um dieses Problem zu lösen. Heute hilft Ihnen der Editor, diese Funktion zu aktivieren. So richten Sie den Passwortschutz für Win10-Ordner ein 1. Zuerst müssen Sie den Ordner auswählen, den Sie verschlüsseln möchten, mit der rechten Maustaste auf den Ordner klicken und in der Popup-Optionsleiste auf Eigenschaften klicken. 2. Klicken Sie in der Eigenschaftenoberfläche unten rechts auf Erweiterte Optionen. 3. Rufen Sie die Benutzeroberfläche für erweiterte Eigenschaften auf, aktivieren Sie das Kontrollkästchen vor dem Verschlüsseln von Inhalten, um Daten zu schützen, und klicken Sie dann auf OK. 4. Anschließend öffnet das System automatisch die Benutzeroberfläche zur Bestätigung der Attributänderung. Klicken Sie in der Benutzeroberfläche auf OK. 5. Auf diese Weise wurde der Passwortschutz erfolgreich eingerichtet und es gibt keine Auswirkungen auf die Verwendung des ursprünglichen Kontos.

Anleitung zur Ordnerfreigabe für Windows 11: Teilen Sie Ihre Dateien und Daten ganz einfach Mar 13, 2024 am 11:49 AM

Im täglichen Leben und bei der Arbeit müssen wir häufig Dateien und Ordner zwischen verschiedenen Geräten teilen. Das Windows 11-System bietet praktische integrierte Ordnerfreigabefunktionen, die es uns ermöglichen, die benötigten Inhalte einfach und sicher mit anderen im selben Netzwerk zu teilen und gleichzeitig die Privatsphäre persönlicher Dateien zu schützen. Diese Funktion macht die Dateifreigabe einfach und effizient, ohne dass Sie befürchten müssen, dass private Informationen verloren gehen. Durch die Ordnerfreigabefunktion des Windows 11-Systems können wir bequemer zusammenarbeiten, kommunizieren und zusammenarbeiten und so die Arbeitseffizienz und den Lebenskomfort verbessern. Um einen freigegebenen Ordner erfolgreich zu konfigurieren, müssen wir zunächst die folgenden Bedingungen erfüllen: Alle Geräte (die an der Freigabe teilnehmen) sind mit demselben Netzwerk verbunden. Aktivieren Sie die Netzwerkerkennung und konfigurieren Sie die Freigabe. Kennen Sie das Zielgerät

Wie erstelle ich einen Ordner auf Realme Phone? Mar 23, 2024 pm 02:30 PM

Titel: Realme Phone-Einsteigerhandbuch: Wie erstelle ich Ordner auf dem Realme Phone? In der heutigen Gesellschaft sind Mobiltelefone zu einem unverzichtbaren Hilfsmittel im Leben der Menschen geworden. Als beliebte Smartphone-Marke wird Realme Phone von Nutzern wegen seines einfachen und praktischen Betriebssystems geliebt. Bei der Verwendung von Realme-Telefonen können viele Menschen auf Situationen stoßen, in denen sie Dateien und Anwendungen auf ihren Telefonen organisieren müssen, und das Erstellen von Ordnern ist eine effektive Möglichkeit. In diesem Artikel erfahren Sie, wie Sie Ordner auf Realme-Telefonen erstellen, um Benutzern die bessere Verwaltung ihrer Telefoninhalte zu erleichtern. NEIN.

See all articles