dnd container page styling

cms/static/js/views/container.js

@@ -66,13 +66,14 @@ define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext",
                             oldParent = parent;
                         }
                     },
-                    helper: "clone",
+                    helper: "original",
                     opacity: '0.5',
                     placeholder: 'component-placeholder',
                     forcePlaceholderSize: true,
                     axis: 'y',
                     items: '> .vertical-element',
-                    connectWith: ".vertical-container"
+                    connectWith: ".vertical-container",
+                    tolerance: "pointer"
 
                 });
             },

cms/static/sass/_base.scss

@@ -4,7 +4,7 @@
 // basic setup
 html {
   font-size: 62.5%;
-  overflow-y: scroll;
+  height: 102%; // force scrollbar to prevent jump when scroll appears, cannot use overflow because it breaks drag
 }
 
 body {

cms/static/sass/elements/_controls.scss

@@ -227,11 +227,12 @@
 
   .action-item {
     display: inline-block;
+    vertical-align: middle;
 
     .action-button {
+      display: block;
       border-radius: 3px;
       padding: ($baseline/4) ($baseline/2);
-      height: ($baseline*1.5);
       color: $gray-l1;
 
       &:hover {
@@ -248,6 +249,15 @@
         background-color: $gray-l1;
       }
     }
+
+    .drag-handle {
+      display: block;
+      float: none;
+      height: ($baseline*1.2);
+      width: ($baseline);
+      margin: 0;
+      background: transparent url("../img/drag-handles.png") no-repeat right center;
+    }
   }
 }
 

cms/static/sass/elements/_xblocks.scss

@@ -19,6 +19,7 @@
     @include box-sizing(border-box);
     @include ui-flexbox();
     @extend %ui-align-center-flex;
+    justify-content: space-between;
     border-bottom: 1px solid $gray-l4;
     border-radius: ($baseline/5) ($baseline/5) 0 0;
     min-height: ($baseline*2.5);
@@ -30,14 +31,14 @@
       @extend %ui-justify-left-flex;
       @include ui-flexbox();
       width: flex-grid(6,12);
-      vertical-align: top;
+      vertical-align: middle;
     }
 
     .header-actions {
       @include ui-flexbox();
       @extend %ui-justify-right-flex;
       width: flex-grid(6,12);
-      vertical-align: top;
+      vertical-align: middle;
     }
   }
 }

cms/static/sass/views/_container.scss

@@ -7,7 +7,7 @@
 // ====================
 
 // UI: container page view
-body.view-container {
+.view-container {
 
   .mast {
     border-bottom: none;
@@ -99,6 +99,57 @@ body.view-container {
 // UI: xblock rendering
 body.view-container .content-primary {
 
+  // dragging bits
+  .ui-sortable-helper {
+
+    article {
+      display: none;
+    }
+  }
+
+  .component-placeholder {
+    height: ($baseline*2.5);
+    opacity: .5;
+    margin: $baseline;
+    background-color: $gray-l5;
+    border-radius: ($baseline/2);
+    border: 2px dashed $gray-l2;
+  }
+
+  .vert-mod {
+
+    // min-height to allow drop when empty
+    .vertical-container {
+      min-height: ($baseline*2.5);
+    }
+
+    .vert {
+      position: relative;
+
+      .drag-handle {
+        display: none; // only show when vert is draggable
+        position: absolute;
+        top: 0;
+        right: ($baseline/2); // equal to margin on component
+        width: ($baseline*1.5);
+        height: ($baseline*2.5);
+        margin: 0;
+        background: transparent url("../img/drag-handles.png") no-repeat scroll center center;
+      }
+    }
+
+    .is-draggable {
+
+      .xblock-header {
+        padding-right: ($baseline*1.5); // make room for drag handle
+      }
+
+      .drag-handle {
+        display: block;
+      }
+    }
+  }
+
   .wrapper-xblock {
     @extend %wrap-xblock;
 

cms/templates/studio_xblock_wrapper.html

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

lms/templates/vert_module.html

@@ -4,9 +4,8 @@ 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">
+        <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>