Run the program
Press ctrl+F5 to reload css
Navigate to Demo 3
Drag an item from the first dropzone and hover over item 7 in the second dropzone. Do not drop the item.
Note spacer divs show dashed borders above both items 6 and 7.
Drag the item back over the first dropzone and note the expanded drop areas remain for both items 6 and 7 as well as expanded drop areas in first dropzone.
Navigate to Demo 2.
Drag Item 1 down over each item in the first drop zone. Note the dashed lines remain in the drop area after item 5 when the item is dragged into the second dropzone.
Drop the item anywhere after item 6 in the second dropzone.
Drag item 1 up over each item in the second dropzone. Note the dashed lines remain above item 6 after the dragged item crosses over it.
Modify the following css as shown:
Modify MaxItems.razor - set MaxItems to 20:
Run the program Press ctrl+F5 to reload css Navigate to Demo 3 Drag an item from the first dropzone and hover over item 7 in the second dropzone. Do not drop the item. Note spacer divs show dashed borders above both items 6 and 7. Drag the item back over the first dropzone and note the expanded drop areas remain for both items 6 and 7 as well as expanded drop areas in first dropzone.
Navigate to Demo 2. Drag Item 1 down over each item in the first drop zone. Note the dashed lines remain in the drop area after item 5 when the item is dragged into the second dropzone. Drop the item anywhere after item 6 in the second dropzone. Drag item 1 up over each item in the second dropzone. Note the dashed lines remain above item 6 after the dragged item crosses over it.