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.

`element.draggable=true;` and `var el = element[0];` look very suspicious... you're trying to set a property on an array, then selecting the first element out of the array. — Callum Linington, Sep 22 '15 at 07:21
I removed the array thing and have set it to the element alone i.e element.draggable=true. But still the same issue — sim kaur, Sep 22 '15 at 07:23
when you take out the first element, you need to then wrap that in `angular.element` before you start to access it like jQuery. so in my mind `element.css` wouldn't work but `angular.element(el).css` would... — Callum Linington, Sep 22 '15 at 07:37
[plnkr](http://plnkr.co/edit/5qOniLuEZOL96uUpbYZL?p=preview) to demonstrate — Callum Linington, Sep 22 '15 at 07:38
But my major concern is to make it draggable which is not happening — sim kaur, Sep 22 '15 at 07:47
Absolutely, but if everything else works then you can start to narrow down the issue — Callum Linington, Sep 22 '15 at 07:54
Evrything else does. I am able to apply the css and stuff but not really able to make it draggable — sim kaur, Sep 22 '15 at 07:56
Do you know about this [example](https://docs.angularjs.org/guide/directive#creating-a-directive-that-adds-event-listeners) — Callum Linington, Sep 22 '15 at 08:04

score 0 · Answer 1 · answered Feb 18 '22 at 13:21

0

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?

answered Feb 18 '22 at 13:21

Mehdi Raza

313
3
15

draggable true not working in angular

1 Answers1