Dashboard: apply a common set of drag and drop styles and behaviours

Description

Drag and drop is supported in two places in the dashboard.

1. "Edit widget display order" pane
2. "New/Edit widget" pane - Column ordering

A common set of styles should be applied to the drag and drop controls. A number of options are presented in https://docs.google.com/document/d/1NMYNUPxy98kU3rFOCNZ0qwx4IRtvCnz4xXAZoLcpzJc/edit#bookmark=id.w32lpk8xapl9

Option H is the preferred option. Three states are anticipated.

1. The below mockup shows the dormant state.

2. When focus is given to the drag handle button, or when the mouse pointer hovers on the button the draggable area is highlighted, as shown in the below mockup.

3. When the drag handle button is selected, by mouse or keyboard, and when the area is being moved. the "selected" style is applied to the draggable area, as shown in the below mockup.

When the drag event ends the state should revert back to the dormant state in 1 above.

Notes

• The aim is to apply the Stripes styles for hover and click/select.
• Ideally the appearance and behaviour will be reusable. How easy would it be to apply in other apps?
• It is important to include a margin between the draggable area's border and it content.