draggable true not working in angular

Question

I have a div:

  <div draggable = "true" ng-show="showPullDown" class="topPull stretch" draggable >

</div> 

But draggable =true is not working. I have tried setting it through controller as well but no help. Any alternatives or fix?

directive:

.directive('draggable', function ($ionicGesture) {
  return function(scope, element) {
        // this gives us the native JS object
       var startX = 0, startY = 0, x = 0, y = 0;
        element.draggable=true;
        var el = element[0];
        element.css({
       position: 'relative',
       cursor: 'pointer'
      });

$ionicGesture.on('dragstart',  function(e) { 
         e.dataTransfer.effectAllowed = 'move';

                return false;
            }, element);


$ionicGesture.on('dragend',  function(e) { 
                return false;
            }, element);
   }
})

I get an error..

Uncaught TypeError: Cannot set property 'effectAllowed' of undefined

Also, console.log(e) gives the event but console.log(e.dataTransfer) gives undefined.

Answer 1

This worked for me in Angular 1.

<div ng-attr-draggable="{{condition || undefined}}">

found the hint from the answers posted in the following question.

What is the best way to conditionally apply attributes in AngularJS?