2016-06-24 7 views
2

こんにちは私はAngularJsの新機能ですが、モーダルポップアップをドラッグできるようにするかなりクールなディレクティブを変更しました...しかし、クリックすると移動します画面の左隅に表示されます。Movable Popupディレクティブがポップアップを画面の隅に移動させます

JS:

(function() { 

    var schemaWizardApp = angular.module('schemaWizardApp'); 

    schemaWizardApp.directive('modaldraggable', function ($document) { 
     "use strict"; 
     return function (scope, element) { 
      var startX = 400, 
       startY = 400, 
       x = 400, 
       y = 400; 
      element= angular.element(document.getElementsByClassName("modal-dialog")); 
      console.log("added directive"); 
      element.css({ 
       position: 'fixed', 
       cursor: 'move' 
      }); 

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

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

      function mouseup() { 
       $document.unbind('mousemove', mousemove); 
       $document.unbind('mouseup', mouseup); 
      } 
     }; 
    }); 

})(); 

はCSS:

.modal-dialog { 
     position: fixed; 
     left: 40%; 
    } 
+0

jsfiddleがありますか? – jtmingus

+0

残念ながら私は...私は1つに取り組もうとすることはできません – user2402107

答えて

0

だから、答えは、私は、Y = 400、X = 400を設定しなければならなかったです。私が望んでいた画面のどんな値にも。

関連する問題