Rumah > hujung hadapan web > tutorial js > Angularjs mencipta kotak pop timbul untuk mencapai kesan seretan_AngularJS

Angularjs mencipta kotak pop timbul untuk mencapai kesan seretan_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 15:21:27
asal
1184 orang telah melayarinya

Contoh dalam artikel ini memperkenalkan kod yang berkaitan untuk mencipta kotak timbul dalam angularjs untuk mencapai kesan seret Dalam projek, kotak timbul yang digunakan dalam angular-ui-bootstrap perlu dibuat boleh diseret dan dikongsi. dengan semua orang untuk rujukan anda Kandungan khusus Seperti berikut

Pemarahan operasi:

Memandangkan ia tidak dilaksanakan dalam fail sumber, anda perlu melaksanakan arahan itu sendiri Berikut adalah arahan, yang boleh dilaksanakan melalui ujian peribadi.

.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);
        }
        };
  }]);
Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan