From bbe906f77f7f9e901ba108428cdfe97d46a09af7 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 8 Oct 2013 17:24:00 -0400
Subject: [PATCH] Studio: changes drag and drop container to new .wrapper-dnd
 on outline/subsection views

---
 cms/static/js/views/overview.js    |   2 +-
 cms/templates/edit_subsection.html |   8 +-
 cms/templates/overview.html        | 151 +++++++++++++++--------------
 3 files changed, 83 insertions(+), 78 deletions(-)

diff --git a/cms/static/js/views/overview.js b/cms/static/js/views/overview.js
index ea4a55e158..1425bb5333 100644
--- a/cms/static/js/views/overview.js
+++ b/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));
diff --git a/cms/templates/edit_subsection.html b/cms/templates/edit_subsection.html
index 364411b01c..3ed4f6552e 100644
--- a/cms/templates/edit_subsection.html
+++ b/cms/templates/edit_subsection.html
@@ -21,9 +21,11 @@
         <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="sortable-unit-list">
-        <label>${_("Units:")}</label>
-          ${units.enum_units(subsection, subsection_units=subsection_units)}
+        <div class="wrapper-dnd">
+          <div class="sortable-unit-list">
+            <label>${_("Units:")}</label>
+              ${units.enum_units(subsection, subsection_units=subsection_units)}
+          </div>
         </div>
       </article>
     </div>
diff --git a/cms/templates/overview.html b/cms/templates/overview.html
index f075fd4e17..cfdb603107 100644
--- a/cms/templates/overview.html
+++ b/cms/templates/overview.html
@@ -138,87 +138,90 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
 
   <div class="main-wrapper">
     <div class="inner-wrapper">
-      <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()}">
 
-          <%include file="widgets/_ui-dnd-indicator-before.html" />
+      <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()}">
 
-          <header>
-          <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="expand-collapse-icon collapse"></a>
+            <%include file="widgets/_ui-dnd-indicator-before.html" />
 
-            <div class="item-details" data-id="${section.location}">
-              <h3 class="section-name" data-name="${section.display_name_with_default | h}"></h3>
-              <div class="section-published-date">
-                <%
-                  if section.start is not None:
-                      start_date_str = section.start.strftime('%m/%d/%Y')
-                      start_time_str = section.start.strftime('%H:%M')
-                  else:
-                      start_date_str = ''
-                      start_time_str = ''
-                %>
-                %if section.start is None:
-                  <span class="published-status">${_("This section has not been released.")}</span>
-                  <a href="#" class="schedule-button" data-date="" data-time="" data-id="${section.location}">${_("Schedule")}</a>
-                %else:
-                  <span class="published-status"><strong>${_("Will Release:")}</strong>
-                  ${date_utils.get_default_time_display(section.start)}</span>
-                  <a href="#" class="edit-button" data-date="${start_date_str}"
-                    data-time="${start_time_str}" data-id="${section.location}">${_("Edit")}</a>
-                %endif
-              </div>
-            </div>
+            <header>
+            <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="expand-collapse-icon collapse"></a>
 
-            <div class="item-actions">
-              <a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
-              <span data-tooltip="${_('Drag to reorder')}" class="drag-handle section-drag-handle"></span>
-            </div>
-          </header>
-          <div class="subsection-list">
-            <div class="list-header">
-              <a href="#" class="new-subsection-item" data-category="${new_subsection_category}">
-                <span class="new-folder-icon"></span>${_("New Subsection")}
-              </a>
-            </div>
-            <ol class="sortable-subsection-list" data-id="${section.location.url()}">
-              % for subsection in section.get_children():
-              <li class="courseware-subsection branch collapsed id-holder is-draggable" data-id="${subsection.location}" data-parent-id="${section.location.url()}">
-
-                <%include file="widgets/_ui-dnd-indicator-before.html" />
-
-                <div class="section-item">
-                  <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])}">
-                      <span class="folder-icon"></span>
-                      <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
-                    </a>
-                  </div>
-
-                  <div class="gradable-status" data-initial-status="${subsection.format if subsection.format is not None else _('Not Graded')}">
-                  </div>
-
-                  <div class="item-actions">
-                    <a href="#" data-tooltip="${_('Delete this subsection')}" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>
-                    <span data-tooltip="${_('Drag to reorder')}" class="drag-handle subsection-drag-handle"></span>
-                  </div>
+              <div class="item-details" data-id="${section.location}">
+                <h3 class="section-name" data-name="${section.display_name_with_default | h}"></h3>
+                <div class="section-published-date">
+                  <%
+                    if section.start is not None:
+                        start_date_str = section.start.strftime('%m/%d/%Y')
+                        start_time_str = section.start.strftime('%H:%M')
+                    else:
+                        start_date_str = ''
+                        start_time_str = ''
+                  %>
+                  %if section.start is None:
+                    <span class="published-status">${_("This section has not been released.")}</span>
+                    <a href="#" class="schedule-button" data-date="" data-time="" data-id="${section.location}">${_("Schedule")}</a>
+                  %else:
+                    <span class="published-status"><strong>${_("Will Release:")}</strong>
+                    ${date_utils.get_default_time_display(section.start)}</span>
+                    <a href="#" class="edit-button" data-date="${start_date_str}"
+                      data-time="${start_time_str}" data-id="${section.location}">${_("Edit")}</a>
+                  %endif
                 </div>
-                ${units.enum_units(subsection)}
+              </div>
 
-                <%include file="widgets/_ui-dnd-indicator-after.html" />
-              </li>
-              % endfor
-              <li class="ui-splint ui-splint-indicator">
-                <%include file="widgets/_ui-dnd-indicator-initial.html" />
-              </li>
-            </ol>
-          </div>
+              <div class="item-actions">
+                <a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
+                <span data-tooltip="${_('Drag to reorder')}" class="drag-handle section-drag-handle"></span>
+              </div>
+            </header>
+            <div class="subsection-list">
+              <div class="list-header">
+                <a href="#" class="new-subsection-item" data-category="${new_subsection_category}">
+                  <span class="new-folder-icon"></span>${_("New Subsection")}
+                </a>
+              </div>
+              <ol class="sortable-subsection-list" data-id="${section.location.url()}">
+                % for subsection in section.get_children():
+                <li class="courseware-subsection branch collapsed id-holder is-draggable" data-id="${subsection.location}" data-parent-id="${section.location.url()}">
 
-          <%include file="widgets/_ui-dnd-indicator-after.html" />
-        </section>
-        % endfor
-      </article>
+                  <%include file="widgets/_ui-dnd-indicator-before.html" />
+
+                  <div class="section-item">
+                    <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])}">
+                        <span class="folder-icon"></span>
+                        <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
+                      </a>
+                    </div>
+
+                    <div class="gradable-status" data-initial-status="${subsection.format if subsection.format is not None else _('Not Graded')}">
+                    </div>
+
+                    <div class="item-actions">
+                      <a href="#" data-tooltip="${_('Delete this subsection')}" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>
+                      <span data-tooltip="${_('Drag to reorder')}" class="drag-handle subsection-drag-handle"></span>
+                    </div>
+                  </div>
+                  ${units.enum_units(subsection)}
+
+                  <%include file="widgets/_ui-dnd-indicator-after.html" />
+                </li>
+                % endfor
+                <li class="ui-splint ui-splint-indicator">
+                  <%include file="widgets/_ui-dnd-indicator-initial.html" />
+                </li>
+              </ol>
+            </div>
+
+            <%include file="widgets/_ui-dnd-indicator-after.html" />
+          </section>
+          % endfor
+        </article>
+      </div>
     </div>
   </div>
   <footer></footer>