У меня есть функция, которая использует jquery draggable с помощью только start() и stop().
Я хотел бы установить свойство INSIDE stop()
а затем вернуть его OUTSIDE draggable, поэтому я решил добавить его в окно следующим образом:
function dragTimbro() {
$scope.documentoTimbrabile = true;
angular.element(document.querySelector('#timbroDraggable'))
.draggable({
containment: "parent",
start: function( event, ui ) {
$(this).removeClass("draggable");
$(this).addClass("dragging");
},
stop: function( event, ui ) {
$(this).addClass("draggable");
$(this).removeClass("dragging");
$scope.setPos(ui.position.left, ui.position.top);
}
});
};
$scope.setPos = function(posX, posY) {
$scope.documentoDaTimbrare[$scope.numPag].posX = posX;
$scope.documentoDaTimbrare[$scope.numPag].posY = posY;
}
Когда я пытаюсь получить доступ к объекту в последней строке, он равен нулю.
Я знаю, что это проблема разных областей, но я не знаю, как решить эту проблему...
ОБНОВЛЕНИЕ: $scope
определяется вне перетаскиваемого, поэтому доступ к ней невозможен в stop()
;
ОБНОВЛЕНИЕ 2: Я знаю, что я собираюсь сделать кого-то злым, но каким-то образом мне удалось найти решение...
В основном я создал функцию вне dragTimbro(), а затем вызываю ее внутри stop.
Но я не понимаю, почему stop видит функцию, но не объект.
Я обновил код, чтобы сделать все более четким
Предложение if
выполняется до того, как произойдет событие. В этом случае поместите оператор if
в блок stop
функции.
В этом if
оператор if
больше не имеет смысла, поэтому я удалил его. Кстати, ваши идентификаторы очень длинные.
Поскольку объект $scope
больше недоступен в области функции stop
вы можете определить глобальный метод или свойство, доступное в глобальном объекте, где вы можете изменить переменную $scope
. Или просто сделать глобальную $scope
.
window.$scope = $scope;
angular
.element(document.querySelector('#timbroDraggable'))
.draggable({
containment: "parent",
// On drag start
start: function( event, ui ) {
$(this).removeClass("draggable");
$(this).addClass("dragging");
},
// On drag stop
stop: function( event, ui ) {
window.oggettoDaTimbrare.posizioneTimbroX = ui.position.left;
window.oggettoDaTimbrare.posizioneTimbroY = ui.position.top;
$scope.documentoDaTimbrare[$scope.numPag].pagine.posX = window.oggettoDaTimbrare.posizioneTimbroX;
/* ... */
}
});