9
इस plunk में मेरे पास एक ड्रैगगेबल टाइटल बार के साथ एक कोणीय यूआई मोडल है। जब आप बार खींचते हैं, तो संपूर्ण मोडल चलता है। समस्या यह है कि यदि मैं माउस को अपेक्षाकृत तेज और नीचे ले जाता हूं, तो कर्सर बार पर ध्यान केंद्रित करता है और मोडल चलना बंद कर देता है। इसे ठीक करने का कोई तरीका? किसी अन्य विधि का भी स्वागत है।ड्रैगगेबल एंगुलर यूआई मोडल फोकस
एचटीएमएल
<body ng-app="app" ng-controller="ctl">
<script type="text/ng-template" id="myModalContent.html">
<div class="topbar">This is the title</div>
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
</body>
जावास्क्रिप्ट
var app = angular.module("app", ['ui.bootstrap']);
app.controller("ctl", function($scope,$uibModal,$timeout) {
var modalInstance;
$scope.open = function() {
modalInstance = $uibModal.open({
animation: false,
windowClass: 'the-modal',
templateUrl: 'myModalContent.html'
});
$timeout(function(){
$('.modal-content').draggable({
drag: function(event, ui) {
if(event.toElement.className.indexOf("topbar") == -1) return false;
}
});
},10);
};
});
मैं Plunker ऊपर दौड़ा देखें और यह बहुत अजीब व्यवहार - जैसे कि यह कुछ बिंदु पर खींचें खो देता है। कोड इतना आसान है कि कुछ भी गलत नहीं हो सकता है। मैं उलझन में हूं :( – Mikkel