AngularJS: Styling dragged item with drag and drop

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;
}