eweitnauer

Series of examples:

• direct immediate dragging
• indirect immediate dragging
• direct animated dragging
• indirect animated dragging

The examples explore different dragging implementations along two dimensions: First, direct vs. indirect where in the former case the dragged element is determined automatically by the DOM event, while in the latter case, the hit tests on the elements are done manually. This allows, e.g., for moving several elements at once, or moving elements that are not under the mouse when the user started dragging. The second dimension is immediate position update as new mouse positions come in as dragging events or positions updates using transitions. The latter may give the feeling of a slightly smoother interaction.

eweitnauer

Series of examples:

• direct immediate dragging
• indirect immediate dragging
• direct animated dragging
• indirect animated dragging

The examples explore different dragging implementations along two dimensions: First, direct vs. indirect where in the former case the dragged element is determined automatically by the DOM event, while in the latter case, the hit tests on the elements are done manually. This allows, e.g., for moving several elements at once, or moving elements that are not under the mouse when the user started dragging. The second dimension is immediate position update as new mouse positions come in as dragging events or positions updates using transitions. The latter may give the feeling of a slightly smoother interaction.

eweitnauer

Series of examples:

• direct immediate dragging
• indirect immediate dragging
• direct animated dragging
• indirect animated dragging

The examples explore different dragging implementations along two dimensions: First, direct vs. indirect where in the former case the dragged element is determined automatically by the DOM event, while in the latter case, the hit tests on the elements are done manually. This allows, e.g., for moving several elements at once, or moving elements that are not under the mouse when the user started dragging. The second dimension is immediate position update as new mouse positions come in as dragging events or positions updates using transitions. The latter may give the feeling of a slightly smoother interaction.

eweitnauer

Series of examples:

• direct immediate dragging
• indirect immediate dragging
• direct animated dragging
• indirect animated dragging

The examples explore different dragging implementations along two dimensions: First, direct vs. indirect where in the former case the dragged element is determined automatically by the DOM event, while in the latter case, the hit tests on the elements are done manually. This allows, e.g., for moving several elements at once, or moving elements that are not under the mouse when the user started dragging. The second dimension is immediate position update as new mouse positions come in as dragging events or positions updates using transitions. The latter may give the feeling of a slightly smoother interaction.

eweitnauer

Translate the view by dragging with the mouse or one finger. Rotate, scale and translate the view using two fingers at once.

This example is based on the transform behavior, which is in turn based on the mtouch events.

Mtouch events allows treating mouse events and touch events the same way. It supports the events "touch", "release", "tap", "dbltap", "hold", "drag" and "mdrag". The "mdrag" event is dispatched per mousemove/touchmove DOM event and can contain multiple changed touches at once, while all the other events are dispatched per touch.

eweitnauer

Demonstration of the basic mtouch_events event types.

mtouch_events allows treating mouse events and touch events the same way. It supports the events "touch", "release", "tap", "dbltap", "hold", "drag" and "mdrag". The "mdrag" event is dispatched per mousemove/touchmove DOM event and can contain multiple changed touches at once, while all the other events are dispatched per touch.

eweitnauer

Performant dragging of multiple elements using mtouch_events. Hit-testing is done manually, so you can start dragging anywhere and you'll pick up the first elements you pass over. If elements overlap, you can also move several at once. Works fine even with 10 fingers at once.

eweitnauer

Hold any circle and tap another one to connect / disconnect both.

eweitnauer

Drag multiple circles at once using two fingers. The circles on the line connecting your fingers when you start dragging are selected.

eweitnauer

Drag multiple circles at once using two fingers. The circles inside the rectangle spanned by your fingers when you start dragging are selected.