Keep height of .items container constant (instead of updating positions

of items after dropping them).

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -10,13 +10,12 @@ function DragAndDropBlock(runtime, element) {
     var __state;
     var __vdom = virtualDom.h();  // blank virtual DOM
 
-    var itemsWrapperHeight;
-
     var init = function() {
         $.ajax(runtime.handlerUrl(element, 'get_data'), {
             dataType: 'json'
         }).done(function(data){
             setState(data);
+            setItemsHeight();
             initDroppable();
         });
 
@@ -27,14 +26,15 @@ function DragAndDropBlock(runtime, element) {
         publishEvent({event_type: 'xblock.drag-and-drop-v2.loaded'});
     };
 
+    var setItemsHeight = function() {
+        $('.items', element).height($('.items', element).height());
+    };
+
     var getState = function() {
         return __state;
     };
 
     var setState = function(new_state) {
-        // Keep track of height of container that holds draggable items
-        itemsWrapperHeight = $('.items', element).height();
-
         if (new_state.state.feedback) {
             if (new_state.state.feedback !== __state.state.feedback) {
                 publishEvent({
@@ -92,7 +92,7 @@ function DragAndDropBlock(runtime, element) {
                 // Wrap in setTimeout to let the droppable event finish.
                 setTimeout(function() {
                     setState(state);
-                    submitLocation(state, item_id, zone, top, left);
+                    submitLocation(item_id, zone, top, left);
                 }, 0);
             }
         });
@@ -133,28 +133,7 @@ function DragAndDropBlock(runtime, element) {
         });
     };
 
-    var submitLocation = function(state, item_id, zone, top, left) {
-        // If height of items wrapper has changed, adjust vertical location of item
-        var newItemsWrapperHeight = $('.items', element).height();
-
-        if (newItemsWrapperHeight < itemsWrapperHeight) {
-            var heightDelta = itemsWrapperHeight - newItemsWrapperHeight,
-                item = state.state.items[item_id],
-                newTop = parseFloat(item.top) - heightDelta,
-                itemElement = $('.option[data-value="' + item_id + '"]', element);
-
-            // Update top
-            top = newTop + 'px';
-            // Update state
-            item.top = top;
-            state.state.items[item_id] = item;
-            // Update position
-            itemElement.css('top', top);
-
-            // Update wrapper height
-            itemsWrapperHeight = newItemsWrapperHeight;
-        }
-
+    var submitLocation = function(item_id, zone, top, left) {
         if (!zone) {
             return;
         }
@@ -236,11 +215,15 @@ function DragAndDropBlock(runtime, element) {
     };
 
     var resetExercise = function() {
+        $('.items').height('auto');
         $.ajax({
             type: 'POST',
             url: runtime.handlerUrl(element, 'reset'),
             data: '{}',
-            success: setState
+            success: function(new_state) {
+                setState(new_state);
+                setItemsHeight();
+            }
         });
     };
 

tests/integration/test_interaction.py

@@ -77,6 +77,9 @@ class InteractionTestFixture(BaseIntegrationTest):
         action_chains.drag_and_drop(element, target).perform()
 
     def test_item_positive_feedback_on_good_move(self):
+        # Scroll drop zones into view to make sure Selenium can successfully drop items
+        self.scroll_down(pixels=100)
+
         for definition in self._get_correct_item_for_zone().values():
             if not definition.input:
                 self.drag_item_to_zone(definition.item_id, definition.zone_id)
@@ -108,6 +111,10 @@ class InteractionTestFixture(BaseIntegrationTest):
 
     def test_item_positive_feedback_on_bad_input(self):
         feedback_popup = self._page.find_element_by_css_selector(".popup-content")
+
+        # Scroll drop zones into view to make sure Selenium can successfully drop items
+        self.scroll_down(pixels=100)
+
         for definition in self._get_correct_item_for_zone().values():
             if definition.input:
                 self.drag_item_to_zone(definition.item_id, definition.zone_id)
@@ -125,6 +132,9 @@ class InteractionTestFixture(BaseIntegrationTest):
 
         initial_locations = get_locations()
 
+        # Scroll drop zones into view to make sure Selenium can successfully drop items
+        self.scroll_down(pixels=100)
+
         for item_key, definition in items.items():
             self.drag_item_to_zone(item_key, definition.zone_id)
             if definition.input:
@@ -135,7 +145,7 @@ class InteractionTestFixture(BaseIntegrationTest):
         self.wait_until_html_in(self.feedback['final'], self._get_feedback_message())
 
         # Scroll "Reset exercise" button into view to make sure Selenium can successfully click it
-        self.scroll_down(pixels=150)
+        self.scroll_down(pixels=250)
 
         reset = self._page.find_element_by_css_selector('.reset-button')
         reset.click()