Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

While I was looking into an issue I was having with ng-repeats in the ui-sortable directive, which I later found was the same issue as this (https://github.com/angular-ui/ui-sortable/issues/2), I came across another issue regarding the scope of the ui-sortable directive.

If you look at this fiddle: http://jsfiddle.net/hKYWr/707/

Please open your console, and you'll notice that when you start and stop the drag, you'll see a "start" and "stop" in your console.

However, when you introduce a second ui-sortable section with different options, it overrides the events of the first one (or vice versa). You will notice that the "stop" no longer gets called by the first set of colors: http://jsfiddle.net/hKYWr/708/

While stepping through the angular-ui.js file, these are the lines that cause problems:

// If user provided 'start' callback compose it with onStart function
      _start = opts.start;
      opts.start = function(e, ui) {
        onStart(e, ui);
        if (typeof _start === "function")
          _start(e, ui);
      };

      // If user provided 'start' callback compose it with onStart function
      _stop = opts.stop;
      opts.stop = function(e, ui) {
        onStop(e, ui);
        if (typeof _stop === "function")
          _stop(e, ui);
      };

      // If user provided 'update' callback compose it with onUpdate function
      _update = opts.update;
      opts.update = function(e, ui) {
        onUpdate(e, ui);
        if (typeof _update === "function")
          _update(e, ui);
      };

the _stop seems to get overwritten with "undefined" from whichever ui-sortable gets called last.

Does anyone how to handle multiple ui-sortable elements on the same page? Please let me know if I am doing something wrong, thanks in advance!

share|improve this question

1 Answer

I just copied and pasted the latest sortable.js code to the jsfiddle editor, and removed the link <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>. It seems to work properly.

Please take a look at the demo.

Demo

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.