Prevent overlapping drop placements

README.md

@@ -11,7 +11,7 @@ The editor is fully guided. Features include:
 * custom zone labels
 * ability to show or hide zone borders
 * custom text and background colors for items
-* optional auto-alignment for items (left, right, center)
+* auto-alignment for items: left, right, center
 * image items
 * decoy items that don't have a zone
 * feedback popups for both correct and incorrect attempts
@@ -122,15 +122,13 @@ whether or not to display borders outlining the zones. It is possible
 to define an arbitrary number of drop zones as long as their labels
 are unique.
 
-Additionally, you can specify the alignment for items once they are dropped in
-the zone.  No alignment is the default, and causes items to stay where the
-learner drops them.  Left alignment causes dropped items to be placed from left
+You can specify the alignment for items once they are dropped in
+the zone. Centered alignment is the default, and places items from top to bottom
+along the center of the zone. Left alignment causes dropped items to be placed from left
 to right across the zone. Right alignment causes the items to be placed from
-right to left across the zone. Center alignment places items from top to bottom
-along the center of the zone. If left, right, or center alignment is chosen,
-items dropped in a zone will not overlap, but if the zone is not made large
-enough for all its items, they will overflow the bottom of the zone, and
-potentially, overlap the zones below.
+right to left across the zone. Items dropped in a zone will not overlap,
+but if the zone is not made large enough for all its items, they will overflow the bottom
+of the zone, and potentially overlap the zones below.
 
 ![Drag item edit](/doc/img/edit-view-items.png)
 
@@ -151,6 +149,9 @@ You can leave all of the checkboxes unchecked in order to create a
 You can define an arbitrary number of drag items, each of which may
 be attached to any number of zones.
 
+"Maximum items per Zone" setting controls how many items can be dropped into a
+single zone, allowing some degree of control over items overlapping zones below.
+
 Scoring
 -------
 

drag_and_drop_v2/default_data.py

@@ -38,6 +38,7 @@
             "y": 30,
             "width": 196,
             "height": 178,
+            "align": "center"
         },
         {
             "uid": MIDDLE_ZONE_ID,
@@ -47,6 +48,7 @@
             "y": 210,
             "width": 340,
             "height": 138,
+            "align": "center"
         },
         {
             "uid": BOTTOM_ZONE_ID,
@@ -56,6 +58,7 @@
             "y": 350,
             "width": 485,
             "height": 135,
+            "align": "center"
         }
     ],
     "items": [
@@ -65,7 +68,9 @@
                 "incorrect": ITEM_INCORRECT_FEEDBACK,
                 "correct": ITEM_CORRECT_FEEDBACK.format(zone=TOP_ZONE_TITLE)
             },
-            "zones": [TOP_ZONE_ID],
+            "zones": [
+                TOP_ZONE_ID
+            ],
             "imageURL": "",
             "id": 0,
         },
@@ -75,7 +80,9 @@
                 "incorrect": ITEM_INCORRECT_FEEDBACK,
                 "correct": ITEM_CORRECT_FEEDBACK.format(zone=MIDDLE_ZONE_TITLE)
             },
-            "zones": [MIDDLE_ZONE_ID],
+            "zones": [
+                MIDDLE_ZONE_ID
+            ],
             "imageURL": "",
             "id": 1,
         },
@@ -85,7 +92,9 @@
                 "incorrect": ITEM_INCORRECT_FEEDBACK,
                 "correct": ITEM_CORRECT_FEEDBACK.format(zone=BOTTOM_ZONE_TITLE)
             },
-            "zones": [BOTTOM_ZONE_ID],
+            "zones": [
+                BOTTOM_ZONE_ID
+            ],
             "imageURL": "",
             "id": 2,
         },
@@ -95,7 +104,11 @@
                 "incorrect": "",
                 "correct": ITEM_ANY_ZONE_FEEDBACK
             },
-            "zones": [TOP_ZONE_ID, BOTTOM_ZONE_ID, MIDDLE_ZONE_ID],
+            "zones": [
+                TOP_ZONE_ID,
+                BOTTOM_ZONE_ID,
+                MIDDLE_ZONE_ID
+            ],
             "imageURL": "",
             "id": 3
         },