Verify children are rendered before allowing drop into collapsed parent.

TNL-56

cms/static/js/utils/drag_and_drop.js

@@ -260,6 +260,10 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "js/views/feedback_notif
             },
 
             expandElement: function (ele) {
+                // Verify all children of the element are rendered.
+                var ensureChildrenRendered = ele.data('ensureChildrenRendered');
+                if (_.isFunction(ensureChildrenRendered)) { ensureChildrenRendered(); }
+                // Update classes.
                 ele.removeClass(this.collapsedClass);
                 ele.find('.expand-collapse').first().removeClass('expand').addClass('collapse');
             },
@@ -354,7 +358,8 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "js/views/feedback_notif
                     handleClass: null,
                     droppableClass: null,
                     parentLocationSelector: null,
-                    refresh: null
+                    refresh: null,
+                    ensureChildrenRendered: null
                 }, options);
 
                 if ($(element).data('droppable-class') !== options.droppableClass) {
@@ -362,7 +367,8 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "js/views/feedback_notif
                       'droppable-class': options.droppableClass,
                       'parent-location-selector': options.parentLocationSelector,
                       'child-selector': options.type,
-                      'refresh': options.refresh
+                      'refresh': options.refresh,
+                      'ensureChildrenRendered': options.ensureChildrenRendered
                     });
 
                     draggable = new Draggabilly(element, {

cms/static/js/views/course_outline.js

@@ -168,7 +168,8 @@ define(["jquery", "underscore", "js/views/xblock_outline", "js/views/utils/view_
                         handleClass: '.section-drag-handle',
                         droppableClass: 'ol.list-sections',
                         parentLocationSelector: 'article.outline',
-                        refresh: this.refreshWithCollapsedState.bind(this)
+                        refresh: this.refreshWithCollapsedState.bind(this),
+                        ensureChildrenRendered: this.ensureChildrenRendered.bind(this)
                     });
                 }
                 else if ($(element).hasClass("outline-subsection")) {
@@ -177,7 +178,8 @@ define(["jquery", "underscore", "js/views/xblock_outline", "js/views/utils/view_
                         handleClass: '.subsection-drag-handle',
                         droppableClass: 'ol.list-subsections',
                         parentLocationSelector: 'li.outline-section',
-                        refresh: this.refreshWithCollapsedState.bind(this)
+                        refresh: this.refreshWithCollapsedState.bind(this),
+                        ensureChildrenRendered: this.ensureChildrenRendered.bind(this)
                     });
                 }
                 else if ($(element).hasClass("outline-unit")) {
@@ -186,7 +188,8 @@ define(["jquery", "underscore", "js/views/xblock_outline", "js/views/utils/view_
                         handleClass: '.unit-drag-handle',
                         droppableClass: 'ol.list-units',
                         parentLocationSelector: 'li.outline-subsection',
-                        refresh: this.refreshWithCollapsedState.bind(this)
+                        refresh: this.refreshWithCollapsedState.bind(this),
+                        ensureChildrenRendered: this.ensureChildrenRendered.bind(this)
                     });
                 }
             }

cms/static/js/views/xblock_outline.js

@@ -149,10 +149,17 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/views/utils/
                     }
                 }
                 // Ensure that the children have been rendered before expanding
-                if (this.shouldRenderChildren() && !this.renderedChildren) {
+                this.ensureChildrenRendered();
+                BaseView.prototype.toggleExpandCollapse.call(this, event);
+            },
+
+            /**
+             * Verifies that the children are rendered (if they should be).
+             */
+            ensureChildrenRendered: function() {
+                if (!this.renderedChildren && this.shouldRenderChildren()) {
                     this.renderChildren();
                 }
-                BaseView.prototype.toggleExpandCollapse.call(this, event);
             },
 
             /**