AngularJS: Styling dragged item with drag and drop - angularjs

Question

Basically all I want to do is have the dragged item have a decreased opacity so that it is slightly see through. My issue is that I can't seem to change the style of the item being dragged when it is initially started dragging.
<div class=" btn btn-droppable growBackground"
ng-repeat="folder in Folders"
data-drop="true"
ng-model='Folders'
jqyoui-droppable="{index: {{$index}}, onOver: 'moveFolderOnFolder($index)'}"
data-jqyoui-options="{accept: '.folder'}">
<div class="btn btn-draggable grow folder nospacing"
data-drag="true"
data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
ng-model="Folders"
<!-- IMPORTANT LINE HERE -->
jqyoui-draggable="{index: {{$index}}, placeholder:true, animate:false, onDrag: 'storeDraggedFolderId(folder.Id)', onStart: 'addDraggingClass()', onStop: 'removeDraggingClass()' }">
{{folder.Name}}
</div>
The important bit of this code is in the second draggable div in the jqyoui options where i apply the folderopacity class through the onstop and onstart methods.
This code has the following effect -
The bottom block is the one being currently dragged. I want THIS one to have the opacity styling, but I can't find a way of doing it (at least initially anyway. If I do not remove the class when the dragging finished it will keep the opacity next time you drag it). I seem to have tried this with a bunch of the different attributes but yet no success.
Any ideas?

Answer 1

if I understood you correctly you want to catch the "drag" event and accordingly use an ng-class to add/remove class right?
so you can either add a drag event that jqyoui-dragable is producing(I assume its angular-dragdrop):
http://codef0rmer.github.io/angular-dragdrop/#/
or you can just catch a mix of mousedown mouseup and mousemove events (prone to errors) and that with ng-class
the docs for the event are in the webpage.
you probably want to use onStart event catch it in the controller
onStart- callback method to be invoked (has to be defined in a
controller) when dragging starts
so in the docs it shows
<div jqyoui-draggable="{onStart:'startCallback(item)'}">
jsut add in the controller the callback:
$scope.startCallback = function(){
$scope.isDragged = true;
}
and in the box add
ng-class={'opacityClass':isDragged}
for the other option just check when mouse is down and not up and see that the mousemove has been triggered and if all those statuses occur update the ng-class.Dont see why but if you want Ill help out with that
naturally if the

Answer 2

During dragging, the item dragged gets ui-draggable-dragging style appended to the class attribute.
Adding this to the css will do the trick:
.ui-draggable-dragging{
opacity:0.3;
}