Make all of section/subsection/unit draggable.

cms/static/js/views/overview.js

@@ -3,23 +3,23 @@ $(document).ready(function() {
     // Section
     makeDraggable(
         '.courseware-section',
-        'a.section-drag-handle',
+        '.section-drag-handle',
         '.courseware-overview',
         'article.courseware-overview'
     );
     // Subsection
     makeDraggable(
         '.id-holder',
-        'a.subsection-drag-handle',
+        '.subsection-drag-handle',
         '.subsection-list > ol',
         '.courseware-section'
     );
     // Unit
     makeDraggable(
         '.unit',
-        'a.unit-drag-handle',
-        '.sortable-unit-list',
-        'li.branch'
+        '.unit-drag-handle',
+        'ol.sortable-unit-list',
+        'li.branch, article.subsection-body'
     );
 
     /*

cms/templates/overview.html

@@ -141,7 +141,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
       <article class="courseware-overview" data-id="${context_course.location.url()}">
         % for section in sections:
         <section class="courseware-section branch" data-id="${section.location}" data-parent-id="${context_course.location.url()}">
-          <header>
+          <header class="section-drag-handle">
           <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="expand-collapse-icon collapse"></a>
 
             <div class="item-details" data-id="${section.location}">
@@ -169,7 +169,6 @@ 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 section-drag-handle"></a>
             </div>
           </header>
           <div class="subsection-list">
@@ -181,7 +180,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
             <ol data-id="${section.location.url()}">
               % for subsection in section.get_children():
               <li class="branch collapsed id-holder draggable" data-id="${subsection.location}" data-parent-id="${section.location.url()}">
-                <div class="section-item">
+                <div class="section-item subsection-drag-handle">
                   <div class="details">
                     <a href="#" data-tooltip="${_('Expand/collapse this subsection')}" class="expand-collapse-icon expand"></a>
                     <a href="${reverse('edit_subsection', args=[subsection.location])}">
@@ -195,7 +194,6 @@ 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 subsection-drag-handle"></a>
                   </div>
                 </div>
                 ${units.enum_units(subsection)}

cms/templates/widgets/units.html

@@ -19,7 +19,7 @@ This def will enumerate through a passed in subsection and list all of the units
       else:
         selected_class = ''
     %>
-    <div class="section-item ${selected_class}">
+    <div class="section-item unit-drag-handle ${selected_class}">
       <a href="${reverse('edit_unit', args=[unit.location])}" class="${unit_state}-item">
         <span class="${unit.scope_ids.block_type}-icon"></span>
         <span class="unit-name">${unit.display_name_with_default}</span>
@@ -27,7 +27,6 @@ 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 unit-drag-handle"></a>
       </div>
       % endif
     </div>