Restore the ability to drag at any level inside a vertical and clean up templates.

cms/templates/studio_xblock_wrapper.html

@@ -36,9 +36,6 @@
                         </a>
                     </li>
                 % endif
-                <li class="action-item drag">
-                    <span data-tooltip="${_('Drag to reorder')}" class="drag-handle action"></span>
-                </li>
             </ul>
         </div>
     </header>

common/lib/xmodule/xmodule/vertical_module.py

@@ -17,6 +17,22 @@ class VerticalModule(VerticalFields, XModule):
     ''' Layout module for laying out submodules vertically.'''
 
     def student_view(self, context):
+        # When rendering a Studio preview, use a different template to support drag and drop.
+        if context and context['runtime_type'] == 'studio':
+            return self.studio_preview_view(context)
+
+        return self.render_view(context, 'vert_module.html')
+
+    def studio_preview_view(self, context):
+        """
+        Renders the Studio preview view, which supports drag and drop.
+        """
+        return self.render_view(context, 'vert_module_studio_view.html')
+
+    def render_view(self, context, template_name):
+        """
+        Helper method for rendering student_view and the Studio version.
+        """
         fragment = Fragment()
         contents = []
 
@@ -29,7 +45,7 @@ class VerticalModule(VerticalFields, XModule):
                 'content': rendered_child.content
             })
 
-        fragment.add_content(self.system.render_template('vert_module.html', {
+        fragment.add_content(self.system.render_template(template_name, {
             'items': contents
         }))
         return fragment

lms/templates/vert_module.html

@@ -1,14 +1,7 @@
-<%!
-from django.utils.translation import ugettext as _
-%>
 <div class="vert-mod">
-    <ol class="vertical-container">
-        % for idx, item in enumerate(items):
-        <li class="vertical-element is-draggable">
-            <div class="vert vert-${idx}" data-id="${item['id']}">
-                ${item['content']}
-            </div>
-        </li>
-        % endfor
-    </ol>
+% for idx, item in enumerate(items):
+  <div class="vert vert-${idx}" data-id="${item['id']}">
+    ${item['content']}
+  </div>
+% endfor
 </div>

lms/templates/vert_module_studio_view.html

@@ -0,0 +1,15 @@
+<%!
+from django.utils.translation import ugettext as _
+%>
+<div class="vert-mod">
+    <ol class="vertical-container">
+        % for idx, item in enumerate(items):
+        <li class="vertical-element is-draggable">
+            <div class="vert vert-${idx}" data-id="${item['id']}">
+                <span data-tooltip="${_('Drag to reorder')}" class="drag-handle action"></span>
+                ${item['content']}
+            </div>
+        </li>
+        % endfor
+    </ol>
+</div>