Heim > Artikel > Web-Frontend > jquery implementiert Drag & Drop

jquery implementiert Drag & Drop

PHPzOriginal: 2023-05-25 10:07:071313Durchsuche

Mit der Beliebtheit moderner Webseiten sind ziehbare Elemente, die mit Benutzern interagieren, zu einem unverzichtbaren Bestandteil des Designs geworden. JQuery ist eine sehr beliebte JavaScript-Bibliothek, die viele gängige Vorgänge in der Entwicklung vereinfacht. Eines der Features ist die Implementierung ziehbarer Elemente. In diesem Artikel erfahren Sie, wie Sie ziehbare Elemente mit JQuery implementieren.

1. HTML und CSS erstellen

Bevor wir mit dem Schreiben von JQuery-Code beginnen, benötigen wir eine HTML-Seite, um ziehbare Elemente zu implementieren. Wir erstellen ein einfaches HTML-Layout mit ziehbaren Elementen und einigen grundlegenden CSS-Stilen. Hier ist unser HTML- und CSS-Code:

<!DOCTYPE html>
<html>
   <head>
      <title>可拖拽实例</title>
      <style type="text/css">
         .draggable {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: #fff;
            text-align: center;
            line-height: 100px;
            position: absolute;
            cursor: move;
         }
      </style>
   </head>
   <body>
      <div class="draggable">可拖拽元素</div>
   </body>
</html>

In unserem Code haben wir eine einfache HTML-Seite erstellt, die ein ziehbares Element enthält. Unser CSS-Stil definiert den Stil unserer ziehbaren Elemente, einschließlich Breite, Höhe, Farbe, Position usw.

2. Stellen Sie die JQuery-Bibliothek vor.

Als nächstes müssen wir die JQuery-Bibliothek vorstellen. Sie können die neuesten Bibliotheksdateien von der offiziellen JQuery-Website herunterladen und in Ihr eigenes Projekt einfügen. Alternativ können Sie den CDN-Link von JQuery verwenden. Fügen Sie unserem Code den folgenden Code hinzu:

<!DOCTYPE html>
<html>
   <head>
      <title>可拖拽实例</title>
      <style type="text/css">
         .draggable {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: #fff;
            text-align: center;
            line-height: 100px;
            position: absolute;
            cursor: move;
         }
      </style>
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
   </head>
   <body>
      <div class="draggable">可拖拽元素</div>
   </body>
</html>

In unserem Code haben wir einen CDN-Link für JQuery hinzugefügt, den wir für unser Beispiel verwenden können.

3. JQuery-Code schreiben

Jetzt beginnen wir mit dem Schreiben von JQuery-Code, um die Funktion ziehbarer Elemente zu implementieren. Der Kern von JQuery sind Selektoren und Ereignisse. In unserem Beispiel verwenden wir das Ereignis .mousemove() und die Methode .css().

<!DOCTYPE html>
<html>
   <head>
      <title>可拖拽实例</title>
      <style type="text/css">
         .draggable {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: #fff;
            text-align: center;
            line-height: 100px;
            position: absolute;
            cursor: move;
         }
      </style>
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script>
         $(document).ready(function() {
            var x = 0;
            var y = 0;
            var dragging = false;
            var element;
            $(".draggable").mousedown(function(e) {
               element = $(this);
               x = e.pageX - element.offset().left;
               y = e.pageY - element.offset().top;
               dragging = true;
            });
            $(document).mouseup(function() {
               dragging = false;
            });
            $(document).mousemove(function(e) {
               if (dragging) {
                  element.css({
                     top: e.pageY - y,
                     left: e.pageX - x
                  });
               }
            });
         });
      </script>
   </head>
   <body>
      <div class="draggable">可拖拽元素</div>
   </body>
</html>

In unserem Code verwenden wir $(document).ready(), um anzuzeigen, dass die Seite geladen ist und der JQuery-Code ausgeführt werden kann.

Wir definieren zunächst vier Variablen: x und y speichern den Abstand zwischen dem Mauszeiger und der oberen linken Ecke des Elements, durch Ziehen wird ermittelt, ob das Element gezogen wird, und mit element wird das gezogene Element gespeichert.

Wir verwenden $(".draggable").mousedown(), um das Mousedown-Ereignis an unser Element zu binden. Wenn der Benutzer auf ein Element klickt und die Maus drückt, wird der Abstand zwischen dem Mauszeiger und dem Element aufgezeichnet und die Ziehvariable auf „true“ gesetzt.

Wir verwenden $(document).mouseup(), um das Mouseup-Ereignis so zu binden, dass es erkennt, wenn der Benutzer die Maustaste loslässt. In diesem Fall wird die Dragging-Variable auf false gesetzt.

Schließlich verwenden wir $(document).mousemove(), um das Mousemove-Ereignis zu binden, um Mausbewegungen zu erkennen. Wenn das Element gezogen wird (Dragging = true), wird die Methode .css() verwendet, um die oberen und linken Werte des Elements festzulegen, um das Element unter dem Mauszeiger zu verschieben.

4. Testeffekt

Jetzt können wir unseren Code im Browser ausführen. Wenn alles richtig funktioniert, sollten wir in der Lage sein, auf unser ziehbares Element zu klicken und es zu ziehen.

Während des Tests müssen Sie möglicherweise bestimmte Werte in Ihrem Code anpassen, damit Ihre ziehbaren Elemente besser funktionieren. Möglicherweise können Sie auch zusätzliche Stile und Attribute hinzufügen, um Ihr Element an Ihre Projektanforderungen anzupassen.

Zusammenfassung:

In diesem Artikel haben wir gelernt, wie man mit JQuery ziehbare Elemente implementiert. Wir haben einfachen HTML- und CSS-Code geschrieben und die JQuery-Bibliothek hinzugefügt. Wir verwenden die Ereignisse .mousedown(), .mouseup() und .mousemove() sowie die Methode .css(), um die Drag-and-Drop-Funktion zu implementieren.

Wenn Sie JQuery verwenden, um ziehbare Elemente in Ihren eigenen Projekten zu implementieren, können Sie den in diesem Artikel bereitgestellten Beispielcode als Ausgangspunkt verwenden und ihn an Ihre Bedürfnisse anpassen. Achten Sie stets auf Lesbarkeit, Wartbarkeit und Benutzerfreundlichkeit.

Das obige ist der detaillierte Inhalt vonjquery implementiert Drag & Drop. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css html 指针事件选择器

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：Vue-Einstellungen aktivieren CookiesNächster Artikel：Vue-Einstellungen aktivieren Cookies

In Verbindung stehende Artikel

Mehr sehen