У меня есть div, и это перетаскиваемый элемент.При перетаскивании он должен падать на компонент, мы должны показать номер, куда он падает.Я делаю прикрепленный снимок экрана.
Я использую угловую директиву для перетаскивания, и вот код ниже.Я просто хотел знать, что я могу запустить метод showLineEffect из директивы, но dropProperties не обновляется в пользовательском интерфейсе, но в консоли он показывает обновленные значения при перетаскивании.
Я пытался с событием ng-mouseoverно это не работает, когда мы держим и элемент.Пожалуйста, дайте мне знать, если есть другое решение.
Контроллер:
var vm= this;
vm.dropProperties = {
showLine: false,
indentLeft: 0,
indentRight: 0,
totalWidth: 10,
totalHeight: 32,
startMonth: 0
};
vm.showLineEffect = function (event) {
vm.dropProperties.showLine = true;
vm.dropProperties.startMonth = Math.round((event.clientX - 160) / 48);
console.log($ctrl.dropProperties +"changed");
}
Директива:
app.directive('dragOppSol',
function dragOppSol() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.prop('draggable', true);
element.on('dragstart', function (event) {
console.log("drag started");
//event.dataTransfer.setData('text', event.target.id)
});
}
};
}
);
app.directive('dropOppSol',
function dropOppSol() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('dragover', function (event) {
event.preventDefault();
//console.log("test change" + scope.ctrl.dropProperties.startMonth);
scope.ctrl.showLineEffect(event);
// Implementation of CSS
});
element.on('drop', function (event) {
event.preventDefault();
});
}
};
});
