CODEWITHSUNDEEP
javascriptangularjsjquery-uijquery-ui-sortable
night_crawler
night_crawler

Reputation: 43

Custom event handler is not executed when using Angular UI Sortable?

I have the following piece of code:

  <ul ui-sortable ng-model="list">
    <!-- onDragStartHandler() is a global function, not part of $scope -->
    <li draggable ondragstart="onDragStartHandler();" ng-repeat="item in list">Item: {{item}}</li>
  </ul>

When ui-sortable (github) directive is used, the code attached to ondragstart is not executed at all.

You can see this here.

Any ideas how this event handler can be invoked as well?

Upvotes: 0

Views: 91

Answers (1)

Zach
Zach

Reputation: 3207

My guess is, the ui-sortable manipulates the dom and removes the event handlers.

If you look at their options - you can probably wire into the callbacks like so:

<ul ui-sortable="sortableOptions" ng-model="list">
  <!-- onDragStartHandler() is a global function, not part of $scope -->
  <li draggable ng-repeat="item in list">Item: {{item}}</li>
</ul>

and your controller:

$scope.sortableOptions = {
  start: onDragStartHandler(e, ui)
};

Because onDragStartHandler is a global function - remember that you may need to $apply() the scope to see updates to bindings.

Upvotes: 1

Related Questions