Drag behaviour in Lists should use pointer capture

This is a **non-urgent refinement**, but noting it now, as it should be a better experience and with possibly less/better JS code.

Our current implementation of dragging to select multiple elements uses only mouse events to control the drag. Essentially, this means that the only good option is to cancel the drag the moment the mouse pointer leaves the area of the list. This is not how other UIs work. Demo of that on Windows is the below and to drag from one element to another with your mouse cursor leaving the list area:

'F'⎕WC'Form'
'F.L'⎕WC'List'('Items' ('foo' 'bar' 'baz' 'quux'))('Style' 'Multi')

See [setPointerCapture](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture) and play with the slider demo. Note that you can move outside of the demo area with the mouse button held down, and it continues to work.

This combined with [document.elementsFromPoint](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint) for determining the last item being dragged over is a cleaner solution to dragging.

Locate the current list drag-selection implementation and trace how its mouse events end when the pointer leaves the list. Read the setPointerCapture and document.elementsFromPoint references in the issue, then compare the behavior with the Windows example. Done means dragging continues across the list boundary and selects the last item under the pointer.

Written by the indexing model from the issue text.