If I change data-drop value after the initialization the directive does not update its behavior.

[akaNico]

[bradrich]

+1

[bradrich]

@mentalernie At least we know that it isn't something in our own code, because the demo here: http://codef0rmer.github.io/angular-dragdrop/#!/ctrl, doesn't work either. After you spell the correct character, the letters are supposed to not be draggable anymore.

[bradrich]

It would seem that the watcher for the data-drop and data-drag attributes is being killed prematurely. On lines 334 and 398 of the non-minified codebase is this:

if (killWatcher && angular.isDefined(newValue) && (angular.equals(attrs.drop, 'true') || angular.equals(attrs.drop, 'false'))) { killWatcher(); killWatcher = null; }

This is killing the watcher right after the initialization. Commenting/removing those blocks of code cause everything to work properly.

[bradrich]

EDIT: The fix that I mentioned above, leads to some weird issues, where droppable areas are not accepting the draggables. I am still investigating.

[codef0rmer]

@bradrich The annotated code above is for static attributes only such as data-drag="true" or data-drag="false".

@mentalernie If you want the behavior to be dynamic, you've to use a model and then use it in the DOM. For example, $scope.drag = false and data-drag="{{drag}}". Later when you update $scope.drag = true, the element will be draggable instantly.

[akaNico]

@codef0rmer I'm sorry but I was talking on "data-drop" Data-drag is ok.

[bradrich]

@codef0rmer @mentalernie is correct. The data-drop feature is not working with a dynamic {{...}} approach. Your demo that I pasted the link to above shows that.

[codef0rmer]

@bradrich @mentalernie How can I reproduce the issue with data-drop?

[RichOnPeers]

+1 I am also experiencing this issue. @bradrich did you find a more stable solution than the one you posted above? @codef0rmer you can reproduce the issue from the demo link @bradrich posted above: http://codef0rmer.github.io/angular-dragdrop/#!/ctrl - after "Gollum" is spelt out it is still possible to rearrange the letters.

[eviltek2099]

I am having this issue as well.

[bradrich]

Here is how I have been able to overcome the issue:

• Comment out the if statement on line 334: https://github.com/codef0rmer/angular-dragdrop/blob/master/src/angular-dragdrop.js#L334
• Comment out the if statement on line 398: https://github.com/codef0rmer/angular-dragdrop/blob/master/src/angular-dragdrop.js#L398
• Replace line 331 (https://github.com/codef0rmer/angular-dragdrop/blob/master/src/angular-dragdrop.js#L331) with this:

dragSettings = scope.$eval(element.attr('jqyoui-draggable') || element.attr('data-jqyoui-draggable')) || {}; jqyouiOptions = scope.$eval(attrs.jqyouiOptions) || {}; element .draggable({disabled: true}) .draggable(jqyouiOptions);

• Now that the code has moved down, replace line 399 with this:

dropSettings = scope.$eval($(element).attr('jqyoui-droppable') || $(element).attr('data-jqyoui-droppable')) || {}; jqyouiOptions = scope.$eval(attrs.jqyouiOptions) || {}; element .droppable({disabled: true}) .droppable(jqyouiOptions);

So far, I have had good luck with this implementation.

Notes:

• The only reason that I have done a PR is this hasn't been fully tested or used outside of my own development.
• Please understand that you assume your own liability using the aforementioned changes.

[mxmzb]

For me, nor the drag is reacting to changes in the data-drag attribute. I have something like that:

$scope.textIsDraggable = function(index) {
   return $scope.draggableText == index;
 }

and then

<div class="card-text" ng-repeat="text in design.texts track by $index" ng-class="{'draggable': textIsDraggable($index)}" id="card-text-{{$index}}" data-drag="{{textIsDraggable($index)}}" data-index="{{$index}}" data-containment="offset" jqyoui-draggable="{ onStop: 'setDesignTextPosition' }"></div>

Yet if I change $scope.draggableText it won't react to changes and stay draggable (the attribute changes to false though, as I can see in the chrome inspector).

[thejeff77]

I had the same problem, however I verified that @bradrich 's changes fixed my issue. I opened up a PR for them: https://github.com/codef0rmer/angular-dragdrop/pull/338