CODEWITHSUNDEEP
angularjsfirefoxangular-ui-sortable
aw04
aw04

Reputation: 11177

angular ui-sortable: Stop click event on drop in Firefox

I'm using angular ui-sortable to order items via drag and drop. The items being sorted also have a click event attached to them. In firefox, dropping one of these items fires the click event. In all other browsers I've tested, it does not.

Here's a simple example (check the console log):

HTML

<div ng-app="app" ng-controller="ctrl as vm">
  <div ui-sortable="vm.sortableOptions" ng-model="vm.items">
    <div ng-repeat="item in vm.items">
      <a href ng-click="vm.log()">
        <div class="box"></div>
      </a>
    </div>
  </div>
</div>

CSS

.box {
  width: 100px;
  height: 100px;
  background: #ff0000;
  margin: 8px;
}

JS

angular.module('app', ['ui.sortable'])
    .controller('ctrl', [function () {
    var vm = this;

    vm.sortableOptions = {
        stop: function (e) {

      }
    }

    vm.items = [
        {},
        {},
        {},
        {}
    ];

    vm.log = function () {
        console.log('clicked');
    }
}]);

I would like for this not to happen. Calling Event.preventDefault() does not work as I'd hoped it would (probably because it's an angular click event).

I could of course set some sort of flag in the stop callback (it seems to always fire before the click handler) but I'd prefer a cleaner solution as that could get a bit ugly to keep track of.

Upvotes: 2

Views: 1249

Answers (1)

Derlin
Derlin

Reputation: 9891

Use:

vm.sortableOptions = {
    helper: 'clone'
};

It tells the module to use a clone for the drag, which also disable all the events fired. I checked in Firefox and it works perfectly.

Upvotes: 7

Related Questions