Move dropped item to different zone in assessment mode.

In standard mode, once you drop an item into the correct zone, you can
no longer move it until you reset the exercise.

In assessment mode, we want users to be able to freely move items
between zones until they explicitly submit their solution.

This commit implements the ability to move dropped items between zones
in assessment mode. It does not make any changes to standard mode.

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -143,6 +143,11 @@
     margin: 0;
     transform: translate(-50%, -50%); /* These blocks are to be centered on their absolute x,y position */
 }
+/* Dragging placed option to a different zone in assessment mode */
+.xblock--drag-and-drop .drag-container .target .option.grabbed-with-mouse {
+    transform: none; /* The transform messes with jQuery UI Draggable positioning, */
+                     /* so remove it while dragging with the mouse. */
+}
 
 /* Placed options in an aligned zone */
 .xblock--drag-and-drop .zone .item-wrapper {
@@ -172,21 +177,24 @@
 }
 
 /* Focused option */
-.xblock--drag-and-drop .drag-container .item-bank .option:focus,
-.xblock--drag-and-drop .drag-container .item-bank .option:hover,
-.xblock--drag-and-drop .drag-container .item-bank .option[aria-grabbed='true'] {
+.xblock--drag-and-drop .drag-container .option[draggable='true']:focus,
+.xblock--drag-and-drop .drag-container .option[draggable='true']:hover,
+.xblock--drag-and-drop .drag-container .option[draggable='true'][aria-grabbed='true'] {
     outline-width: 2px;
     outline-style: solid;
     outline-offset: -4px;
 }
 
-.xblock--drag-and-drop .drag-container .ui-draggable-dragging.option {
+.xblock--drag-and-drop .drag-container .option.grabbed-with-mouse {
     box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.3);
     border: 1px solid #ccc;
     opacity: .65;
     z-index: 20 !important;
     margin: 0; /* Allow the draggable to touch the edges of the target image */
 }
+.xblock--drag-and-drop .drag-container .item-align-center .option.grabbed-with-mouse {
+    margin: 0 auto; /* Revert to auto margin when dragging with mouse to not confuse jQuery UI draggable */
+}
 
 .xblock--drag-and-drop .drag-container .option img {
     display: inline-block;
@@ -254,8 +262,9 @@
 }
 
 /* Focused zone */
+.xblock--drag-and-drop .item-bank:focus,
 .xblock--drag-and-drop .zone:focus {
-    border: 2px solid #a5a5a5;
+    outline: 2px solid #a5a5a5;
 }
 
 .xblock--drag-and-drop .drag-container .target .zone p {

drag_and_drop_v2/translations/en/LC_MESSAGES/text.po

@@ -409,11 +409,15 @@ msgid "ok"
 msgstr ""
 
 #: public/js/drag_and_drop.js
-msgid "Placed in: "
+msgid "Item Bank"
 msgstr ""
 
 #: public/js/drag_and_drop.js
-msgid "Correctly placed in: "
+msgid "Placed in: {zone_title}"
+msgstr ""
+
+#: public/js/drag_and_drop.js
+msgid "Correctly placed in: {zone_title}"
 msgstr ""
 
 #: public/js/drag_and_drop.js

drag_and_drop_v2/translations/eo/LC_MESSAGES/text.po

@@ -494,12 +494,16 @@ msgid "ok"
 msgstr "ök Ⱡ'σя#"
 
 #: public/js/drag_and_drop.js
-msgid "Placed in: "
-msgstr "Pläçéd ïn:  Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
+msgid "Item Bank"
+msgstr "Ìtém Bänk Ⱡ'σяєм ιρѕυм ∂σł#"
 
 #: public/js/drag_and_drop.js
-msgid "Correctly placed in: "
-msgstr "Çörréçtlý pläçéd ïn:  Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
+msgid "Placed in: {zone_title}"
+msgstr "Pläçéd ïn: {zone_title}  Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
+
+#: public/js/drag_and_drop.js
+msgid "Correctly placed in: {zone_title}"
+msgstr "Çörréçtlý pläçéd ïn: {zone_title} Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
 
 #: public/js/drag_and_drop.js
 msgid "Reset problem"

tests/integration/test_render.py

@@ -146,7 +146,6 @@ class TestDragAndDropRender(BaseIntegrationTest):
             self.assertEqual(item.get_attribute('draggable'), 'true')
             self.assertEqual(item.get_attribute('aria-grabbed'), 'false')
             self.assertEqual(item.get_attribute('data-value'), str(index))
-            self.assertIn('ui-draggable', self.get_element_classes(item))
             self._test_item_style(item, color_settings)
             try:
                 background_image = item.find_element_by_css_selector('img')
@@ -160,8 +159,16 @@ class TestDragAndDropRender(BaseIntegrationTest):
 
     def test_drag_container(self):
         self.load_scenario()
-        item_bank = self._page.find_element_by_css_selector('.drag-container')
-        self.assertIsNone(item_bank.get_attribute('role'))
+        drag_container = self._page.find_element_by_css_selector('.drag-container')
+        self.assertIsNone(drag_container.get_attribute('role'))
+
+    def test_item_bank(self):
+        self.load_scenario()
+        item_bank = self._page.find_element_by_css_selector('.item-bank')
+        description = item_bank.find_element_by_css_selector('p.zone-description')
+        self.assertEqual(description.text, 'Item Bank')
+        # Description should only be visible to screen readers:
+        self.assertEqual(description.get_attribute('class'), 'zone-description sr')
 
     def test_zones(self):
         self.load_scenario()

tests/integration/test_sizing.py

@@ -187,6 +187,7 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
         target_img_width = target_img.size["width"]
         item_bank = self._page.find_element_by_css_selector('.item-bank')
         item_bank_width = item_bank.size["width"]
+        item_bank_height = item_bank.size["height"]
 
         if is_desktop:
             # If using a desktop-sized window, we can know the exact dimensions of various containers:
@@ -239,6 +240,10 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
                     *expect.img_pixel_size_exact
                 )
 
+        # Test that the item bank maintains its original size.
+        self.assertEqual(item_bank.size["width"], item_bank_width)
+        self.assertEqual(item_bank.size["height"], item_bank_height)
+
 
 class AlignedSizingTests(SizingTests):
     """