Make drag/drop save content immediately in seqs and verticals

cms/djangoapps/contentstore/views.py

@@ -401,7 +401,9 @@ def save_item(request):
     descriptor = modulestore().get_item(item_location)
     preview_html = get_module_previews(request, descriptor)[0]
 
-    return HttpResponse(json.dumps(preview_html))
+    return HttpResponse(json.dumps({
+        'preview': preview_html
+    }))
 
 
 @login_required

cms/static/coffee/src/views/module_edit.coffee

@@ -35,11 +35,12 @@ class CMS.Views.ModuleEdit extends Backbone.View
     _metadata
 
   save: (data) =>
+    @model.unset('preview')
     @model.set(data)
-    @model.save().done((preview) =>
+    @model.save().done( (resp) =>
       alert("Your changes have been saved.")
 
-      $preview = $(preview)
+      $preview = $(resp.preview)
       @$el.replaceWith($preview)
       @setElement($preview)
       @module.constructor(@$el)

common/lib/xmodule/xmodule/js/src/sequence/edit.coffee

@@ -1,4 +1,9 @@
 class @SequenceDescriptor extends XModule.Descriptor
   constructor: (@element) ->
     @$tabs = $(@element).find("#sequence-list")
-    @$tabs.sortable()
+    @$tabs.sortable(
+      update: (event, ui) => @update()
+    )
+
+  save: ->
+    children: $('#sequence-list li a', @element).map((idx, el) -> $(el).data('id')).toArray()

common/lib/xmodule/xmodule/js/src/vertical/edit.coffee

@@ -1,4 +1,9 @@
 class @VerticalDescriptor extends XModule.Descriptor
   constructor: (@element) ->
     @$items = $(@element).find(".vert-mod")
-    @$items.sortable()
+    @$items.sortable(
+      update: (event, ui) => @update()
+    )
+
+  save: ->
+    children: $('.vert-mod li', @element).map((idx, el) -> $(el).data('id')).toArray()

common/lib/xmodule/xmodule/vertical_module.py

@@ -17,7 +17,10 @@ class VerticalModule(XModule):
 
     def get_html(self):
         if self.contents is None:
-            self.contents = [child.get_html() for child in self.get_display_items()]
+            self.contents = [{
+                'id': child.id,
+                'content': child.get_html()
+            } for child in self.get_display_items()]
 
         return self.system.render_template('vert_module.html', {
             'items': self.contents

common/static/coffee/src/xmodule.coffee

@@ -37,14 +37,15 @@
 
 class @XModule.Descriptor
 
-  callbacks: []
-
   ###
   Register a callback method to be called when the state of this
   descriptor is updated. The callback will be passed the results
   of calling the save method on this descriptor.
   ###
   onUpdate: (callback) ->
+    if ! @callbacks?
+      @callbacks = []
+
     @callbacks.push(callback)
 
   ###

lms/templates/vert_module.html

@@ -1,7 +1,7 @@
 <ol class="vert-mod">
 % for idx, item in enumerate(items):
-  <li id="vert-${idx}">
-    ${item}
+  <li id="vert-${idx}" data-id="${item['id']}">
+    ${item['content']}
   </li>
 % endfor
 </ol>