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

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

This example demonstrates how to take the size of objects into account when selecting objects efficiently with a quadtree. Selected objects are shown in red, visited but not selected objects are shown in yellow. The efficiency depends on the biggest width and biggest height among all object. It is assumed that all objects are rectangle-shaped.

Example series:

• Quadtree 1
• Quadtree 2
• Quadtree 3

Based on Mike Bostock's quadtree example.

eweitnauer

This example demonstrates how to take the size of objects into account when selecting objects efficiently with a quadtree. Selected objects are shown in red, visited but not selected objects are shown in yellow. The efficiency depends on the size of the biggest object. It is assumed that the objects are square-shaped.

Example series:

• Quadtree 1
• Quadtree 2
• Quadtree 3

Based on Mike Bostock's quadtree example.

eweitnauer

This example demonstrates how to take the size of objects into account when selecting objects efficiently with a quadtree. Selected objects are shown in red, visited but not selected objects are shown in yellow. The efficiency depends on the size of the objects. It is assumed that all objects are square-shaped and have the same size.

Example series:

• Quadtree 1
• Quadtree 2
• Quadtree 3

Based on Mike Bostock's quadtree example.

eweitnauer

Related examples:

• SVG geometric zooming
• SVG semantic zooming

eweitnauer

Related examples:

• SVG geometric zooming
• SVG semantic zooming