Last active
January 4, 2016 05:39
-
-
Save andyhot/8576869 to your computer and use it in GitHub Desktop.
Display your lists using this Ember.SortableView (instead of Ember.CollectionView) to allow user to rearrange the items
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Ember.SortableView = Ember.CollectionView.extend({ | |
| tagName: "ul", | |
| sortable_options: {}, | |
| moveItem: function(fromIndex, toIndex) { | |
| var items = this.get('content'), | |
| item = items.objectAt(fromIndex); | |
| items.removeAt(fromIndex); | |
| items.insertAt(toIndex, item); | |
| }, | |
| didInsertElement: function() { | |
| var view = this; | |
| view.$().sortable(this.sortable_options).bind('sortupdate', function(e, ui) { | |
| view.moveItem(ui.oldindex, ui.item.index()); | |
| Ember.run.next(this, function() { | |
| var $node = view.$(); | |
| if ($node) | |
| $node.sortable('reload'); | |
| }); | |
| }); | |
| }, | |
| willDestroyElement: function() { | |
| this.$().sortable('destroy'); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Just a hint for people who want to use this:
ui.oldIndex and the reload method are not present on the original version of html5sortable.
You have to use this fork: https://github.com/voidberg/html5sortable
One small improvement: observe "content.length" so that newly added elements can be dragged too:
https://gist.github.com/functino/9875571