Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
akaNico opened this issue Jun 14, 2016 · 13 comments

Comments

@akaNico
Copy link

akaNico commented Jun 14, 2016

No description provided.

@bradrich
Copy link

+1

@bradrich
Copy link

@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
Copy link

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
Copy link

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
Copy link
Owner

codef0rmer commented Jun 16, 2016

@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
Copy link
Author

akaNico commented Jun 16, 2016

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

@bradrich
Copy link

@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
Copy link
Owner

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

@codef0rmer codef0rmer reopened this Jun 17, 2016
@RichOnPeers
Copy link

+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
Copy link

I am having this issue as well.

@bradrich
Copy link

bradrich commented Jul 9, 2016

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

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
Copy link

mxmzb commented Aug 16, 2016

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
Copy link

I had the same problem, however I verified that @bradrich 's changes fixed my issue. I opened up a PR for them: #338

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants