Studio: changes drag and drop container to new .wrapper-dnd on outline/subsection views

cms/static/js/views/overview.js

@@ -284,7 +284,7 @@ define(["domReady", "jquery", "jquery.ui", "gettext", "js/views/feedback_notific
                         $(ele).data('child-selector', type);
                         var draggable = new Draggabilly(ele, {
                             handle: handleClass,
-                            axis: 'y'
+                            containment: '.wrapper-dnd'
                         });
                         draggable.on('dragStart', _.bind(overviewDragger.onDragStart, overviewDragger));
                         draggable.on('dragMove', _.bind(overviewDragger.onDragMove, overviewDragger));

cms/templates/edit_subsection.html

@@ -21,10 +21,12 @@
         <label>${_("Display Name:")}</label>
           <input type="text" value="${subsection.display_name_with_default | h}" class="subsection-display-name-input" data-metadata-name="display_name"/>
         </div>
+        <div class="wrapper-dnd">
           <div class="sortable-unit-list">
             <label>${_("Units:")}</label>
               ${units.enum_units(subsection, subsection_units=subsection_units)}
           </div>
+        </div>
       </article>
     </div>
 

cms/templates/overview.html

@@ -138,6 +138,8 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
 
   <div class="main-wrapper">
     <div class="inner-wrapper">
+
+      <div class="wrapper-dnd">
         <article class="courseware-overview" data-id="${context_course.location.url()}">
           % for section in sections:
           <section class="courseware-section branch is-draggable" data-id="${section.location}" data-parent-id="${context_course.location.url()}">
@@ -221,6 +223,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
         </article>
       </div>
     </div>
+  </div>
   <footer></footer>
 
   <div class="edit-subsection-publish-settings">