Ember.js 0.9.7.1 JQuery UI Sortable

by chrisconley

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.7.1.js"></script>
<h1>Items</h1>
<script type="text/x-handlebars"> 
  {{#collection "App.MySortableView"}}
    {{content.name}}
  {{/collection}}
</script>

JavaScript

$.fn.extend({
  safeClone: function() {
    var clone;
    clone = $(this).clone();
    clone.find('script[id^=metamorph]').remove();
    clone.removeClass('ember-view');
    clone.find('*').each(function() {
      var $this;
      $this = $(this);
      $this.removeClass('ember-view');
      return $.each($this[0].attributes, function(index, attr) {
        if (attr.name.indexOf('data-bindattr') === -1) {
          return;
        }
        return $this.removeAttr(attr.name);
      });
    });
    if (clone.attr('id') && clone.attr('id').indexOf('ember') !== -1) {
      clone.removeAttr('id');
    }
    
    clone.find('[id^=ember]').removeAttr('id');
    return clone;
  }
});

window.App = Ember.Application.create({
    ready: function() {}
});

App.Item = Ember.Object.extend({
});

App.MySortableView = Em.CollectionView.extend({
    tagName: "ul",
    contentBinding: 'App.Items',
    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({
            start: function(event, ui) {
                ui.item.previousIndex = ui.item.index();                      
            },
            stop: function(event, ui) {
                view.moveItem(ui.item.previousIndex, ui.item.index());
            },
            helper: function(event, ui) {
                return $(ui).safeClone();            
            }
        })
    },
})
            
            
App.Items = [
        App.Item.create({
        name: "Animal"
    }),
        App.Item.create({
        name: "Android"
    }),
        App.Item.create({
        name: "Human"
    })
        ]