Enable section and subsection reordering (with no drag between them)

cms/static/js/base.js

@@ -32,9 +32,11 @@ $(document).ready(function() {
     $('.save-subsection').bind('click', saveSubsection);
 
     // making the unit list sortable
-    $('.sortable-unit-list').sortable();
-    $('.sortable-unit-list').disableSelection();
-    $('.sortable-unit-list').bind('sortstop', onUnitReordered);
+    $('.sortable-unit-list').sortable({
+        axis: 'y',
+        handle: '.drag-handle',
+        update: onUnitReordered
+    });
 
     // expand/collapse methods for optional date setters
     $('.set-date').bind('click', showDateSetter);
@@ -58,6 +60,20 @@ $(document).ready(function() {
         e.preventDefault();
         $('.import .file-input').click();
     });
+
+    // Subsection reordering
+    $('.unit-list ol').sortable({
+        axis: 'y',
+        handle: '.section-item .drag-handle',
+        update: onSubsectionReordered
+    });
+
+    // Section reordering
+    $('.courseware-overview').sortable({
+        axis: 'y',
+        handle: 'header .drag-handle',
+        update: onSectionReordered
+    });
 });
 
 function showImportSubmit(e) {
@@ -110,12 +126,7 @@ function onUnitReordered() {
     var subsection_id = $(this).data('subsection-id');
 
     var _els = $(this).children('li:.leaf');
-
-    var children = new Array();
-    for(var i=0;i<_els.length;i++) {
-	el = _els[i];
-	children[i] = $(el).data('id');
-    }
+    var children = _els.map(function(idx, el) { return $(el).data('id'); }).get();
 
     // call into server to commit the new order
     $.ajax({
@@ -127,6 +138,38 @@ function onUnitReordered() {
 	});
 }
 
+function onSubsectionReordered() {
+    var section_id = $(this).data('section-id');
+
+    var _els = $(this).children('li:.branch');
+    var children = _els.map(function(idx, el) { return $(el).data('id'); }).get();
+
+    // call into server to commit the new order
+    $.ajax({
+        url: "/save_item",
+        type: "POST",
+        dataType: "json",
+        contentType: "application/json",
+        data:JSON.stringify({ 'id' : section_id, 'metadata' : null, 'data': null, 'children' : children})
+    });
+}
+
+function onSectionReordered() {
+    var course_id = $(this).data('course-id');
+
+    var _els = $(this).children('section:.branch');
+    var children = _els.map(function(idx, el) { return $(el).data('id'); }).get();
+
+    // call into server to commit the new order
+    $.ajax({
+        url: "/save_item",
+        type: "POST",
+        dataType: "json",
+        contentType: "application/json",
+        data:JSON.stringify({ 'id' : course_id, 'metadata' : null, 'data': null, 'children' : children})
+    });
+}
+
 function getEdxTimeFromDateTimeInputs(date_id, time_id, format) {
     var input_date = $('#'+date_id).val();
     var input_time = $('#'+time_id).val();

cms/templates/overview.html

@@ -46,7 +46,7 @@
     <div class="inner-wrapper">
       <h1>Courseware</h1>
       <div class="page-actions"></div>
-      <article class="courseware-overview">
+      <article class="courseware-overview" data-course-id="${context_course.location.url()}">
         <a href="#" class="new-courseware-section-button"><span class="plus-icon"></span> New Section</a>
         % for section in sections:
         <section class="courseware-section branch" data-id="${section.location}">
@@ -58,7 +58,7 @@
             </div>
             <div class="item-actions">
               <a href="#" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
-              <a href="#" class="drag-handle wip"></a>
+              <a href="#" class="drag-handle"></a>
             </div>
           </header>
           <div class="unit-list">
@@ -67,7 +67,7 @@
                 <span class="new-folder-icon"></span>New Subsection
               </a>
             </div>
-            <ol>
+            <ol data-section-id="${section.location.url()}">
               % for subsection in section.get_children():
               <li class="branch collapsed" data-id="${subsection.location}">
                 <div class="section-item">
@@ -80,7 +80,7 @@
                   </div>
                   <div class="item-actions">
                     <a href="#" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>                    
-                    <a href="#" class="drag-handle wip"></a>
+                    <a href="#" class="drag-handle"></a>
                   </div>
                 </div>
                 ${units.enum_units(subsection)}