Move draggable items above drop image area.

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -23,7 +23,8 @@
 }
 
 .xblock--drag-and-drop .drag-container {
-    width: 760px;
+    width: 515px;
+    padding: 1%;
     background: #ebf0f2;
     position: relative;
 }
@@ -44,12 +45,9 @@
 
 /** Draggable Items **/
 .xblock--drag-and-drop .drag-container .items {
-    width: 210px;
-    margin: 10px;
+    display: block;
     padding: 0 !important; /* LMS tries to override this */
     position: relative;
-    display: inline;
-    float: left;
     list-style-type: none;
 }
 
@@ -120,12 +118,11 @@
 
 /*** Drop Target ***/
 .xblock--drag-and-drop .target {
+    display: block;
     width: 515px;
     height: 510px;
     position: relative;
-    display: inline;
-    float: left;
-    margin: 10px 0 15px 5px;
+    margin-top: 1%;
     background: #fff;
 }
 

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -10,6 +10,8 @@ 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'
@@ -30,6 +32,9 @@ function DragAndDropBlock(runtime, element) {
     };
 
     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({
@@ -87,7 +92,7 @@ function DragAndDropBlock(runtime, element) {
                 // Wrap in setTimeout to let the droppable event finish.
                 setTimeout(function() {
                     setState(state);
-                    submitLocation(item_id, zone, top, left);
+                    submitLocation(state, item_id, zone, top, left);
                 }, 0);
             }
         });
@@ -128,7 +133,28 @@ function DragAndDropBlock(runtime, element) {
         });
     };
 
-    var submitLocation = function(item_id, zone, top, left) {
+    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;
+        }
+
         if (!zone) {
             return;
         }

tests/integration/test_interaction.py

@@ -96,6 +96,9 @@ class InteractionTestFixture(BaseIntegrationTest):
     def test_item_negative_feedback_on_bad_move(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.items_map.values():
             for zone in self.all_zones:
                 if zone == definition.zone_id:
@@ -132,7 +135,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()
+        self.scroll_down(pixels=150)
 
         reset = self._page.find_element_by_css_selector('.reset-button')
         reset.click()