Rework course overview drag and drop.

Failed drags bring the element back to where it started; elements are
locked to the y-axis, states are represented as CSS classes for
styling, elements can be dragged across section/subsection borders,
and dragging to the top/bottom of a section Just Works™.

Needs some styling love to give visual representation of where the
dragged element will drop, though.

TODO: It'd be good to have auto expand/collapse for subsections.

cms/djangoapps/contentstore/tests/test_contentstore.py

@@ -1484,7 +1484,7 @@ class ContentStoreTest(ModuleStoreTestCase):
         resp = self.client.get(reverse('course_index', kwargs=data))
         self.assertContains(
             resp,
-            '<article class="courseware-overview" data-course-id="i4x://MITx/999/course/Robot_Super_Course">',
+            '<article class="courseware-overview" data-id="i4x://MITx/999/course/Robot_Super_Course">',
             status_code=200,
             html=True
         )

cms/templates/overview.html

@@ -138,9 +138,9 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
 
   <div class="main-wrapper">
     <div class="inner-wrapper">
-      <article class="courseware-overview" data-course-id="${context_course.location.url()}">
+      <article class="courseware-overview" data-id="${context_course.location.url()}">
         % for section in sections:
-        <section class="courseware-section branch" data-id="${section.location}">
+        <section class="courseware-section branch" data-id="${section.location}" data-parent-id="${context_course.location.url()}">
           <header>
           <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="expand-collapse-icon collapse"></a>
 
@@ -169,7 +169,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
 
             <div class="item-actions">
               <a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
-              <a href="#" data-tooltip="${_('Drag to reorder')}" class="drag-handle"></a>
+              <a href="#" data-tooltip="${_('Drag to reorder')}" class="drag-handle section-drag-handle"></a>
             </div>
           </header>
           <div class="subsection-list">
@@ -178,9 +178,9 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
                 <span class="new-folder-icon"></span>${_("New Subsection")}
               </a>
             </div>
-            <ol data-section-id="${section.location.url()}">
+            <ol data-id="${section.location.url()}">
               % for subsection in section.get_children():
-              <li class="branch collapsed id-holder" data-id="${subsection.location}">
+              <li class="branch collapsed id-holder draggable" data-id="${subsection.location}" data-parent-id="${section.location.url()}">
                 <div class="section-item">
                   <div class="details">
                     <a href="#" data-tooltip="${_('Expand/collapse this subsection')}" class="expand-collapse-icon expand"></a>
@@ -195,7 +195,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
 
                   <div class="item-actions">
                     <a href="#" data-tooltip="${_('Delete this subsection')}" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>
-                    <a href="#" data-tooltip="${_('Drag to reorder')}" class="drag-handle"></a>
+                    <a href="#" data-tooltip="${_('Drag to reorder')}" class="drag-handle subsection-drag-handle"></a>
                   </div>
                 </div>
                 ${units.enum_units(subsection)}

cms/templates/widgets/units.html

@@ -5,13 +5,13 @@
 This def will enumerate through a passed in subsection and list all of the units
 -->
 <%def name="enum_units(subsection, actions=True, selected=None, sortable=True, subsection_units=None)">
-<ol ${'class="sortable-unit-list"' if sortable else ''} data-subsection-id="${subsection.location}">
+<ol ${'class="sortable-unit-list"' if sortable else ''}>
   <%
     if subsection_units is None:
       subsection_units = subsection.get_children()
   %>
   % for unit in subsection_units:
-  <li class="leaf unit" data-id="${unit.location}">
+  <li class="leaf unit" data-id="${unit.location}" data-parent-id="${subsection.location.url()}">
     <%
       unit_state = compute_unit_state(unit)
       if unit.location == selected:
@@ -27,7 +27,7 @@ This def will enumerate through a passed in subsection and list all of the units
       % if actions:
       <div class="item-actions">
 	<a href="#" data-tooltip="Delete this unit" class="delete-button" data-id="${unit.location}"><span class="delete-icon"></span></a>
-	<a href="#" data-tooltip="Drag to sort" class="drag-handle"></a>
+	<a href="#" data-tooltip="Drag to sort" class="drag-handle unit-drag-handle"></a>
       </div>
       % endif
     </div>