Skip to content

Commit

Permalink
describe RichDragListener in the alt input quickstart guide, see phet…
Browse files Browse the repository at this point in the history
  • Loading branch information
jessegreenberg committed Jun 4, 2024
1 parent f8c4ef8 commit 7ffbe26
Showing 1 changed file with 13 additions and 9 deletions.
22 changes: 13 additions & 9 deletions doc/alternative-input-quickstart-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -157,27 +157,31 @@ this.addInputListener( {
} );
```

## Drag using the KeyboardDragListener
## Keyboard drag listeners

`DragListener` does NOT handle keyboard input. For Nodes where you’ve added a `DragListener`, you’ll need to add a
corresponding `KeyboardDragListener`. The options for your `DragListener` and `KeyboardDragListener` will typically be
similar, but beware that API differences exist. Avoid duplicating code - factor out any logic that is needed by
both `DragListener` and `KeyboardDragListener`.
`DragListener` does NOT handle keyboard input, so you will need to do some additional work for keyboard dragging.

Your `KeyboardDragListener` will look something like this:
Consider using `scenery-phet/RichDragListener`. It combines a `DragListener` with a `KeyboardDragListener` to support
both mouse and keyboard dragging. It also includes default PhET drag and drop sounds. This is the recommended approach.

If that doesn't work for you, you can use `KeyboardDragListener` directly. The options for your `DragListener`
and `KeyboardDragListener` will typically be similar, but beware that API differences exist. Avoid duplicating
code - factor out any logic that is needed by both `DragListener` and `KeyboardDragListener`.

Your `RichDragListener` will look something like this:

```ts
// pdom - dragging using the keyboard
const keyboardDragListener = new KeyboardDragListener( {
positionProperty: widget.positionProperty,
dragBoundsProperty: dragBoundsProperty,
transform: modelViewTransform,
dragVelocity: 100, // velocity - change in position per second
shiftDragVelocity: 20 // finer-grained
dragSpeed: 100, // velocity - change in position per second
shiftDragSpeed: 20 // finer-grained
} );
```

You’ll also need to add these options to your Node:
You’ll also need to add these options to your Node to make it focusable:

```
// pdom options
Expand Down

0 comments on commit 7ffbe26

Please sign in to comment.