I am trying to use either onDrag or onStart to highlight the acceptable drop zone for an item while dragging is occuring, and then removing the highlight when onStop occurs.
drag occurs here:
<li ng-repeat='item in icons' ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="icons" jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep', onDrag: 'showDropSpot', onStop: 'dropComplete'}">{{item.title}} <img src="/imgs/{{item.file}}"></li>
AngularJs Controller:
$scope.showDropSpot = function(){
$scope.showDropZone = {'border':'4px solid yellow'};
console.log('am dragging', $scope.showDropZone);
}
$scope.dropComplete = function(){
$scope.showDropZone = {'border': '0px'};
console.log('drop done', $scope.showDropZone);
}
DropZone:
<div class="ui-widget-content verticalFMS" ng-style="showDropZone" data-drop="true" ng-model='selectedMenu' jqyoui-droppable="{multiple:true}">
What happens: if i comment out the dropComplete function my div will highlight AFTER the dragged item is dropped, if nothing is commented visually nothing happens. the console.log function in showDropSpot does trigger and output the proper value for showDropZone when drag begins, so why does my styling not happen?
I am trying to use either onDrag or onStart to highlight the acceptable drop zone for an item while dragging is occuring, and then removing the highlight when onStop occurs.
drag occurs here:
<li ng-repeat='item in icons' ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="icons" jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep', onDrag: 'showDropSpot', onStop: 'dropComplete'}">{{item.title}} <img src="/imgs/{{item.file}}"></li>AngularJs Controller:
DropZone:
<div class="ui-widget-content verticalFMS" ng-style="showDropZone" data-drop="true" ng-model='selectedMenu' jqyoui-droppable="{multiple:true}">What happens: if i comment out the dropComplete function my div will highlight AFTER the dragged item is dropped, if nothing is commented visually nothing happens. the console.log function in showDropSpot does trigger and output the proper value for showDropZone when drag begins, so why does my styling not happen?