I have a div and it is a draggable element. It should drop on a component while dragging we should show the number where it is dropping. I do attached screen shot.
I am using angular directive to drag and drop and here is the below code. I just wanted to know I am able to fire showLineEffect method from directive but dropProperties is not getting updated in UI but in console it is showing updated values while dragging.
I tried with ng-mouseover event but its not working when we hold and element. Please let me know if there is any other solution.
Controller:
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");
}
Directive:
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();
});
}
};
});
