Heim > Web-Frontend > js-Tutorial > Angularjs erstellt ein Popup-Fenster, um einen Drag-Effekt zu erzielen_AngularJS

Angularjs erstellt ein Popup-Fenster, um einen Drag-Effekt zu erzielen_AngularJS

WBOY
Freigeben: 2016-05-16 15:21:27
Original
1140 Leute haben es durchsucht

Das Beispiel in diesem Artikel stellt den relevanten Code zum Erstellen einer Popup-Box in AngularJS vor, um den Drag-Effekt zu erzielen. Im Projekt muss die in Angular-UI-Bootstrap verwendete Popup-Box ziehbar und gemeinsam genutzt werden mit allen für Ihre Referenz. Der spezifische Inhalt wie folgt

Operationsrendering:

Da es nicht in der Quelldatei implementiert ist, müssen Sie die Anweisung selbst implementieren. Im Folgenden finden Sie die Anweisung, die durch persönliche Tests implementiert werden kann.

.directive('draggable', ['$document', function($document) {
        return function(scope, element, attr) {
        var startX = 0, startY = 0, x = 0, y = 0;
        element= angular.element(document.getElementsByClassName("modal-dialog")); 
        element.css({
          position: 'relative',
          cursor: 'move'
        });

        element.on('mousedown', function(event) {
          // Prevent default dragging of selected content
          event.preventDefault();
          startX = event.pageX - x;
          startY = event.pageY - y;
          $document.on('mousemove', mousemove);
          $document.on('mouseup', mouseup);
        });

        function mousemove(event) {
          y = event.pageY - startY;
          x = event.pageX - startX;
          element.css({
          top: y + 'px',
          left: x + 'px'
          });
        }

        function mouseup() {
          $document.off('mousemove', mousemove);
          $document.off('mouseup', mouseup);
        }
        };
  }]);
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage