Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Dragging and Moving Shapes | Interactivity and User Input
Canvas Apps with KonvaJS and JavaScript

bookDragging and Moving Shapes

index.html

index.html

script.js

script.js

copy

When you want users to interact with shapes on your canvas, dragging and moving objects is often essential. Konva.js makes it simple to enable drag-and-drop for any shape by using the draggable property. When you set draggable: true on a shape, users can click and drag it to a new position. This works for any shape, such as rectangles or circles, and can be controlled per-shape.

Konva internally manages drag events, including mouse or touch interactions, so you do not need to write custom event handlers for basic dragging. If you want a shape to remain fixed, set draggable: false or simply omit the property, as shapes are not draggable by default. You can also toggle dragging on and off dynamically by changing the draggable property at runtime.

In the provided example, you can drag the red rectangle and blue circle, but the gray rectangle cannot be moved because its draggable property is set to false. This demonstrates how you can control which shapes are interactive and which are static.

question mark

What property must be set to true to make a shape draggable in Konva.js?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 1

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

How do I make a shape draggable in Konva.js?

Can I enable or disable dragging for a shape dynamically?

What events can I listen to when a shape is dragged?

bookDragging and Moving Shapes

Veeg om het menu te tonen

index.html

index.html

script.js

script.js

copy

When you want users to interact with shapes on your canvas, dragging and moving objects is often essential. Konva.js makes it simple to enable drag-and-drop for any shape by using the draggable property. When you set draggable: true on a shape, users can click and drag it to a new position. This works for any shape, such as rectangles or circles, and can be controlled per-shape.

Konva internally manages drag events, including mouse or touch interactions, so you do not need to write custom event handlers for basic dragging. If you want a shape to remain fixed, set draggable: false or simply omit the property, as shapes are not draggable by default. You can also toggle dragging on and off dynamically by changing the draggable property at runtime.

In the provided example, you can drag the red rectangle and blue circle, but the gray rectangle cannot be moved because its draggable property is set to false. This demonstrates how you can control which shapes are interactive and which are static.

question mark

What property must be set to true to make a shape draggable in Konva.js?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 1
some-alt