AngularUI modalne do przeciągania i upuszczania oraz zmiany rozmiaru


Mam okno modalne angularUi opakowane w dyrektywę:
html:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="[url=http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>]http://ajax.googleapis.com/aja ... gt%3B[/url]
<script src="[url=http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>]http://angular-ui.github.io/bo ... gt%3B[/url]
<script src="main.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div my-modal="{ data: 'test2'}">test2 </body>
</html>

javascript:
angular.module('plunker', ['ui.bootstrap', 'myModal']);angular.module("myModal", []).directive("myModal", function ($modal) {
"use strict";
return {
template: '<div ng-click="clickMe(rowData)" ng-transclude>',
replace: true,
transclude: true,
scope: {
rowData: '&myModal'
},
link: function (scope, element, attrs) {
scope.clickMe = function () {
$modal.open({
template: "<div>Created By:" + scope.rowData().data + ""
+ "<div class=\"modal-footer\">"
+ "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"
+ "<button class=\"btn btn-warning\" ng-click=\"cancel()\">Cancel</button>"
+ "",
controller: function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close({ test: "test"});
}; $scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
}
}
};
});

plunker:

http://plnkr.co/edit/yzxtWwZQd ... eview
http://plnkr.co/edit/yzxtWwZQd ... eview
Chcę, aby modalne można było przeciągać i zmieniać ich rozmiar. Przeszukałem Internet i znalazłem następujące rozwiązanie do implementacji draggable:
http://plnkr.co/edit/jHS4SJ?p=preview
http://plnkr.co/edit/jHS4SJ?p=preview
To jest ważna część:
app.directive('dragable', function(){ 
return {
restrict: 'A',
link : function(scope,elem,attr){
$(elem).draggable();
}
}
});

ale nie mogłem zmusić go do pracy na moim przykładzie. Czy ktoś może mi pomóc? Zastanawiam się, czy można użyć modalnego jqueryui opakowanego w dyrektywę (zamiast bootstrapu)? Nie jestem zbyt dobry w javascript i byłbym bardzo pomocny w przypadku każdego działającego przykładu z obiema opcjami. podziękować
EDIT:
Dodałem łącze jqueryui i udało mi się wykonać modalne przeciąganie i upuszczanie, dodając tę ​​linię:
$(".modal-dialog").draggable();

Problem w tym, że nie jestem pewien, kiedy dodać tę linię. W tej chwili dodałem This do metody anulowania (żeby to zadziałało):
$ scope.cancel = function () {
$ (". modalne okno dialogowe"). draggable ();
};
Kiedy więc modal jest otwarty, muszę wywołać anulowanie i dopiero wtedy można przeciągnąć modal. Jeśli zadzwonię wcześniej. okno dialogowe modalne nie istnieje. Propozycje?
zaktualizowany tłok:

http://plnkr.co/edit/yzxtWwZQd ... eview
http://plnkr.co/edit/yzxtWwZQd ... eview
Trochę mi czegoś brakuje, czy ktoś może podać działający przykład?
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Stworzyłem natywną dyrektywę, aby udostępnić modalne przeciąganie i upuszczanie. Potrzebujesz tylko AngularJs i jQuery. Dyrektywa używa klasy "modal-dialog" z modalu UI-Bootstrap i możesz przenosić tylko modalne w nagłówku.
.directive('modalDialog', function(){
return {
restrict: 'AC',
link: function($scope, element) {
var draggableStr = "draggableModal";
var header = $(".modal-header", element); header.on('mousedown', (mouseDownEvent) => {
var modalDialog = element;
var offset = header.offset(); modalDialog.addClass(draggableStr).parents().on('mousemove', (mouseMoveEvent) => {
$("." + draggableStr, modalDialog.parents()).offset({
top: mouseMoveEvent.pageY - (mouseDownEvent.pageY - offset.top),
left: mouseMoveEvent.pageX - (mouseDownEvent.pageX - offset.left)
});
}).on('mouseup', () => {
modalDialog.removeClass(draggableStr);
});
});
}
}
});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jeśli nie chcesz modyfikować wbudowanych szablonów, możesz napisać dyrektywę ukierunkowaną na
modalWindow
:
.directive('modalWindow', function(){
return {
restrict: 'EA',
link: function(scope, element) {
element.draggable();
}
}
});

Pamiętaj, że będziesz musiał pobrać zarówno interfejs użytkownika jQuery, jak i jQuery

z przodu

Skrypty AngularJS.

NOTE
: pamiętaj również, że nowsze wersje programu ładującego Angular UI mają przedrostek „uib”, dzięki czemu „modalWindow” staje się „uibModalWindow” dzięki @valepu
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Połączyłem powyższe dwie odpowiedzi i sprawiłem, że moje modalne przeciąganie jest możliwe.
.directive('modalWindow', function(){
return {
restrict: 'EA',
link: function(scope, element) {
$(".modal-dialog").draggable();
}
}
});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

modalny Angular UI z przeciąganym paskiem tytułu
UWAGA: zarówno jQuery, jak i jQuery UI muszą zostać załadowane przed skryptami AngularJS.
angular.module('xxApp')
.directive('uibModalWindow', function () {
return {
restrict: 'EA',
link: function (scope, element) {
$('.modal-content').draggable({handle: ".modal-header"});
}
}
});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Dziękujemy za przykłady. Niewiele wypoleruję twój kod, a to jest mój ostateczny wynik. Moja decyzja działa dobrze :-)
HTML:
<div class="draggableModal ui-widget-content"> <div class="modal-header">
...

angular.module('posProductsManager').directive('modalDialog', function () {
var definition = {
restrict: 'AC',
link: function ($scope, element) {
var draggableStr = "draggableModal";
var header = $(".modal-header", element);
var modalDialog = element; var clickPosition = null;
var clickOffset = null; header[0].addEventListener('mousedown', function (position) { clickPosition = position;
clickOffset = position; window.addEventListener('mouseup', mouseUpEvent);
window.addEventListener('mousemove', mouseMoveEvent);
}); function mouseUpEvent() {
clickPosition = null;
window.removeEventListener('mouseup', mouseUpEvent);
window.removeEventListener('mousemove', mouseMoveEvent);
} function mouseMoveEvent(position) { var offset = modalDialog.parents().offset(); $("." + draggableStr, modalDialog.parents()).offset({
left: clickPosition.pageX + (position.pageX - clickPosition.pageX) - clickOffset.offsetX,
top: clickPosition.pageY + (position.pageY - clickPosition.pageY) - clickOffset.offsetY,
}); clickPosition = position;
}
}
}; return definition;
});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Spróbuj użyć
$(elem).closest('div.modal-dialog').draggable();

W funkcji komunikacji

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się