Sortable - Drop indicators

Each card sits in a drop target with Edges="BdndEdges.Vertical": while a card is dragged over it, the target reports the edge the pointer is closest to, and a line drawn from the data-bit-bdnd-edge attribute shows where the card will land. The drop carries the edge as ClosestEdge, and BdndList.InsertionIndex and BdndList.Move do the index arithmetic - within a list or across the two. Nothing is measured over interop. With the keyboard, the arrows step through the places between the cards, one place per key. The labels below are a horizontal list (BdndEdges.Horizontal) with no drop target around it: the line is drawn left or right of a label.

Backlog

Alpha

Bravo

Charlie

Delta

Sprint

Echo

Foxtrot

Labels

Right to left

bug

urgent

docs

Labels: bug, urgent, docs, ui

Backlog: Alpha, Bravo, Charlie, Delta | Sprint: Echo, Foxtrot

Each list is a drop target too: a drop below its cards, or on an empty list, lands on the list, which puts the card at its end - unless a card of the list took the drop first, which Monitor.DidDrop() tells, since drops reach the innermost target first. The keyboard visits that place as well ("Alpha is over the end of Backlog"), and every other place between two cards once ("Alpha is after Bravo"). Edges are where they are on screen: laid out right to left, the left edge of a label is after it, so the drop passes reversed: true to BdndList.InsertionIndex - the keyboard turns its arrows around by itself.

Edit this page on GitHub