Gridster is an open source javascript dashboard plugin. It provides a nice simple way to make an auto reshuffling dashboard with very flexible contents.
However if you decide to include an iframe inside a dashboard widget, you will get some strange behaviour when you mouse over your iframe mid-drag. This will cause the drag to stop, and only resume once your mouse leaves the iframe.
This is a common problem with drag and drop, and can be fixed relatively easily by covering your iframe with a transparent element that is hidden by default. When the drag starts, the element is shown. When the drag stops, the element is hidden.
- Add the following HTML to each <li> widget:
- Add the following CSS to the <head> element of your page
- Change your Gridster instantiation javascript to specify the overlay_fix_start and overlay_fix_stop functions for the draggable.start and draggable.stop events:
Now when you start dragging an element, the entire <li> is covered with a full size transparent <div> that covers the mouse over event of the iframe and your drag should never stop, even if you mouse over the location of the iframe.
