Address review comments.

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -72,10 +72,12 @@
     border-radius: 3px;
     margin: 5px;
     padding: 10px;
-    background-color: #2872b2;
+    background-color: #1d5280;
     font-size: 14px;
     color: #fff;
     opacity: 1;
+    outline-color: #fff;
+    outline-style: none;
     /* Some versions of the drag and drop library try to fiddle with this */
     z-index: 10 !important;
 }
@@ -115,7 +117,8 @@
 /* Focused option */
 .xblock--drag-and-drop .drag-container .item-bank .option:focus,
 .xblock--drag-and-drop .drag-container .item-bank .option:hover {
-    outline: 2px solid #fff;
+    outline-width: 2px;
+    outline-style: solid;
     outline-offset: -4px;
 }
 

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -218,7 +218,7 @@
 
 /** Buttons **/
 .xblock--drag-and-drop--editor .btn {
-    background: #2872b2;
+    background: #1d5280;
     color: #fff;
     border: 1px solid #156ab4;
     border-radius: 6px;
@@ -238,7 +238,7 @@
 
 .xblock--drag-and-drop--editor .add-element {
     text-decoration: none;
-    color: #236299;
+    color: #1d5280;
 }
 
 .xblock--drag-and-drop--editor .remove-zone {
@@ -256,7 +256,7 @@
     width: 14px;
     height: 14px;
     border-radius: 7px;
-    background: #236299;
+    background: #1d5280;
     position: relative;
     float: left;
     margin: 0 5px 0 0;
@@ -325,9 +325,9 @@
 
 .xblock--drag-and-drop--editor .remove-item .icon.remove {
     background: #fff;
-    color: #0072a7;
+    color: #0072a7;  /* Override default color from Studio to ensure contrast is large enough */
 }
 .xblock--drag-and-drop--editor .remove-item .icon.remove:before,
 .xblock--drag-and-drop--editor .remove-item .icon.remove:after {
-    background: #236299;
+    background: #1d5280;
 }

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -167,16 +167,18 @@ function DragAndDropBlock(runtime, element, configuration) {
                     revert: 'invalid',
                     revertDuration: 150,
                     start: function(evt, ui) {
-                        var $item = $(this);
-                        $item.attr('aria-grabbed', true);
-                        var item_id = $item.data('value');
+                        var item_id = $(this).data('value');
+                        setGrabbedState(item_id, true);
+                        updateDOM();
                         publishEvent({
                             event_type: 'xblock.drag-and-drop-v2.item.picked-up',
                             item_id: item_id
                         });
                     },
                     stop: function(evt, ui) {
-                        $(this).attr('aria-grabbed', false);
+                        var item_id = $(this).data('value');
+                        setGrabbedState(item_id, false);
+                        updateDOM();
                     }
                 });
             } catch (e) {
@@ -186,6 +188,14 @@ function DragAndDropBlock(runtime, element, configuration) {
         });
     };
 
+    var setGrabbedState = function(item_id, grabbed) {
+        for (var i = 0; i < configuration.items.length; i++) {
+            if (configuration.items[i].id === item_id) {
+                configuration.items[i].grabbed = grabbed;
+            }
+        }
+    };
+
     var destroyDraggable = function() {
         $root.find('.item-bank .option[data-drag-disabled=true]').each(function() {
             try {
@@ -317,6 +327,10 @@ function DragAndDropBlock(runtime, element, configuration) {
                 }
             }
             var imageURL = item.imageURL || item.backgroundImage;  // Fall back on "backgroundImage" to be backward-compatible
+            var grabbed = false;
+            if (item.grabbed !== undefined) {
+                grabbed = item.grabbed;
+            }
             var itemProperties = {
                 value: item.id,
                 drag_disabled: Boolean(item_user_state || state.finished),
@@ -327,6 +341,7 @@ function DragAndDropBlock(runtime, element, configuration) {
                 imageURL: imageURL,
                 imageDescription: item.imageDescription,
                 has_image: !!imageURL,
+                grabbed: grabbed,
             };
             if (item_user_state) {
                 itemProperties.is_placed = true;

drag_and_drop_v2/public/js/view.js

@@ -61,6 +61,9 @@
         }
         if (item.color) {
             style.color = item.color;
+            // Ensure contrast between outline-color and background color
+            // matches contrast between text color and background color:
+            style['outline-color'] = item.color;
         }
         if (item.is_placed) {
             style.left = item.x_percent + "%";
@@ -82,8 +85,8 @@
                     className: className,
                     attributes: {
                         'tabindex': tabindex,
-                        'draggable': true,
-                        'aria-grabbed': false,
+                        'draggable': !item.drag_disabled,
+                        'aria-grabbed': item.grabbed,
                         'data-value': item.value,
                         'data-drag-disabled': item.drag_disabled
                     },

tests/integration/test_render.py

@@ -7,7 +7,7 @@ from .test_base import BaseIntegrationTest
 
 class Colors(object):
     WHITE = 'rgb(255, 255, 255)'
-    BLUE = 'rgb(40, 114, 178)'
+    BLUE = 'rgb(29, 82, 128)'
     GREY = 'rgb(237, 237, 237)'
     CORAL = '#ff7f50'
     CORNFLOWERBLUE = 'cornflowerblue'
@@ -69,6 +69,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
 
     def _test_item_style(self, item_element, style_settings):
         item_val = item_element.get_attribute('data-value')
+        item_selector = '.item-bank .option[data-value=' + item_val + ']'
         style = item_element.get_attribute('style')
         # Check background color
         background_color_property = 'background-color'
@@ -77,7 +78,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
             expected_background_color = Colors.BLUE
         else:
             expected_background_color = Colors.rgb(style_settings['background-color'])
-        background_color = self._get_style('.item-bank .option[data-value='+item_val+']', 'backgroundColor')
+        background_color = self._get_style(item_selector, 'backgroundColor')
         self.assertEquals(background_color, expected_background_color)
 
         # Check text color
@@ -88,9 +89,18 @@ class TestDragAndDropRender(BaseIntegrationTest):
             expected_color = Colors.WHITE
         else:
             expected_color = Colors.rgb(style_settings['color'])
-        color = self._get_style('.item-bank .option[data-value='+item_val+']', 'color')
+        color = self._get_style(item_selector, 'color')
         self.assertEquals(color, expected_color)
 
+        # Check outline color
+        outline_color_property = 'outline-color'
+        if outline_color_property not in style_settings:
+            self.assertNotIn(outline_color_property, style)
+        # Outline color should match text color to ensure it does not meld into background color:
+        expected_outline_color = expected_color
+        outline_color = self._get_style(item_selector, 'outlineColor')
+        self.assertEquals(outline_color, expected_outline_color)
+
     def test_items_default_colors(self):
         self.load_scenario()
         self._test_items()
@@ -109,6 +119,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
             color_settings['background-color'] = item_background_color
         if item_text_color:
             color_settings['color'] = item_text_color
+            color_settings['outline-color'] = item_text_color
 
         self._test_items(color_settings=color_settings)