gistfile1.coffee

Cm.SubmissionWorkspaceView = Em.CollectionView.extend

  tagName: 'ul'
  classNames: [ 'workspace' ]
  itemViewClass: 'submissionPage'

  didInsertElement: ->
    @$().sortable
      placeholder: 'placeholder'
      start: (e, ui) ->
        ui.placeholder.html("<div class='thumbnail'></div>")
      update: Em.run.bind(this, @pageMoved)

  willDestroyElement: ->
    if @$().data('ui-sortable') 
      @$().sortable('destroy')

  pageMoved: (e, ui) ->
    # At this point the DOM has been shifted around by sortable.
    # We use .index() to find item's new index in the DOM.
    newIndex = @$().children().index(ui.item[0])

    # Cancelling sortable restores the original DOM ordering.
    @$().sortable('cancel')

    # At this point the DOM has been reverted to how it was before dragging.
    # We use .index() to find item's old index in the DOM.
    oldIndex = @$().children().index(ui.item[0])

    # Manually adjust the content array to preserve Ember's bindings.
    content = @get('content')
    page = content.objectAt(oldIndex)
    content.removeAt(oldIndex)
    content.insertAt(newIndex, page)

  actions:
    delete: (page) ->
      content = @get('content')
      content.removeObject(page)