Parking :: CodePen - 2 - Can you park here?

See CSS-tricks: Creating a Parking Game With the HTML Drag and Drop API.

Browser testing on PC under Windows7 for https://codepen.io/yelly/full/NyXYrV/. *)

March 12, 2018

Update March 14, 2018.
- In the meantime Firefox 59.0 is arrived. All behaviors are the same as in FF58.
- Chrome is now vs. 65.0.3325.162, also everything the same.

1. Just dropping all vehicles

Testing

• Result in Firefox Quantum (58.0.2):
  
• Result in Chrome ( 65.0.3325.146) and Opera (51.0.2830.55):
  
• Result in Internet Explorer 11:
  

Conclusions

• Firefox is proportional resizing the dropped images, so they fit in the target box.
• Chrome and Opera don't resize, and the (centered) procession is clipped left and right due to the hidden overflow.
• IE11 is only horizontally resizing the images, so they fit in the target box (not proportional).
  And we see that while dragging the png-transparancy of the ghost images is not honored: they have a semi transparent white background box.

Workaround

Omit the .drop-zone {display:flex}, and give the dropped images a fitting width: .drop-zone img {width: 150px}.

• Pen: https://codepen.io/francky/pen/mxJwaa.

2. Dropping on top of existing dropped vehicle (1)

Testing

• Result in Firefox, Chrome, Opera and IE11:
  

Conclusion

• All browsers drop only the first vehicle, and don't drop a new vehicle in the target box, but the original dragged vehicles are disappeared!.

Workaround

See next item.

3. Dropping on top of existing dropped vehicle (2)

Testing

• Result in Firefox, Chrome, Opera and IE11:
  

Conclusion

• Even stranger: if a vehicle is disappeared, you can get it back (in all tested browsers) by dragging the present vehicle and dropping that if the target box is completely green.
  Then suddenly the disappeared vehicle is coming out of the blue!

Workaround

Deny the existing vehicle(s) in the target box by giving it/them a temporary {display: none} during the onDragEnter, by means of a tmp ID (target.id='newVehicle';) in the javascript, combined with #newVehicle img {display: none;} in the CSS. Then overlapping is impossible. At dropping (onDrop), the tmp ID is removed, and everything is visible again.
For the case you drag a vehicle and are still floating above the drop area (but not dropping), and you decide to move away (onDragLeave), also the tmp ID is removed in order to show the already dropped vehicles.
Pitfall is that dragging a dropped vehicle out of the target box lets it disappear outside. That can be avoided by prohibiting further dragging in the onDrop: by adding dragged.setAttribute('draggable','false');.

• New Pen: https://codepen.io/francky/pen/PRqKJq

Parking :: CodePen - 3 - Can you park here?

4. The final result

Browser testing on PC under Windows7 https://codepen.io/yelly/pen/jZQVBJ. *)

Testing

• Result in Firefox Quantum (58.0.2):
  
• Result in Chrome ( 65.0.3325.146) and Opera (51.0.2830.55):
  
• Result in Internet Explorer 11:
  

Conclusions

• Firefox is not dropping the vehicles, but opening the images in the same window/tab; doesn't matter if the time is OK or not.
• Chrome and Opera show the right colors for the timing, but don't drop the vehicles in case of green; after a drag, the dropbox doesn't come back to grey when you don't drag back manually out of the dropbox.
• IE11 doesn't show the dropbox colors, and nothing can drop.

___________________________________
*) Not tested in MS-Edge, nor on tablets or mobile devices. - Some more browser/OS information on Caniuse.com: https://caniuse.com/#search=drag.