# Kanban Card Moving | DayPilot Pro for JavaScript Demo

> Read more about Kanban [card moving](https://doc.daypilot.org/kanban/card-moving/) [doc.daypilot.org].

## Links

- Canonical HTML: /demo/kanban/cardmoving.html
- Source HTML folder: /demo/kanban/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
const kanban = new DayPilot.Kanban("kanban", {
            onCardMoved: (args) => {
                console.log(args);
                kanban.message("Moved");
            },
        });
        kanban.init();

        const app = {
            loadData() {
                const columns = [
                    {name: "Analysis", id: "1", barColor: "#f9ba25"},
                    {name: "Draft", id: "2"},
                    {name: "Testing", id: "3"}
                ];
                const cards = [
                    {id: 1, "name": "Task 1", column: "1", text: "This is a description of task #1."},
                    {id: 2, "name": "Task 2", column: "1", text: "This is a description of task #2.", barColor: "#ea3624"},
                ];
                kanban.update({columns, cards});
            },
            editCard(card) {
                const form = [
                    {id: "name", name: "Name", type: "text"},
                    {id: "text", name: "Description", type: "textarea"}
                ];
                DayPilot.Modal.form(form, card.data).then(modal => {
                    if (modal.canceled) {
                        return;
                    }
                    card.data.name = modal.result.name;
                    card.data.text = modal.result.text;
                    kanban.cards.update(card);
                });
            },
            init() {
                this.loadData();
            }
        };
        app.init();
```