Agent-readable demo data

Title

External Drag and Drop (JavaScript Kanban) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Read more about external drag and drop [doc.daypilot.org].

• Canonical HTML: /demo/kanban/external.html
• Markdown companion: /demo/kanban/external.md
• Folder: /demo/kanban/
• Root: /demo/
• Catalog: /demo/llms.txt

Inline demo script 1

const dp = new DayPilot.Kanban("dp", {
            columns: [
                {name: "Analysis", id: "1", barColor: "#f9ba25"},
                {name: "Draft", id: "2"},
                {name: "Testing", id: "3"}
            ],
            swimlanes: [
                {name: "Swimlane A", id: "A"},
                {name: "Swimlane B", id: "B"}
            ]
        });

        const app = {
            loadData() {
                dp.cards.list = [
                    {id: 1, name: "Task 1", column: "1", swimlane: "A", text: "This is a description of task #1."},
                    {
                        id: 2,
                        name: "Task 2",
                        column: "1",
                        swimlane: "A",
                        text: "This is a description of task #2.",
                        barColor: "#1155CC"
                    },
                    {
                        id: 3,
                        name: "Task 3",
                        column: "1",
                        swimlane: "A",
                        text: "This is a description of task #3.",
                        barColor: "#999"
                    },
                    {
                        id: 4,
                        name: "Task 4",
                        column: "1",
                        swimlane: "A",
                        text: "This is a description of task #4.",
                        barColor: "#6AA84F"
                    },
                    {
                        id: 5,
                        name: "Task 5",
                        column: "2",
                        swimlane: "A",
                        text: "This is a description of task #5.",
                        barColor: "#F6B26B"
                    }
                ];
            },
            addEventHandlers() {
                this.makeDraggable();
            },
            makeDraggable() {
                const parent = document.getElementById("external");
                const items = parent.getElementsByTagName("li");
                for (let i = 0; i < items.length; i++) {
                    const e = items[i];
                    const item = {
                        element: e,
                        remove: e,
                        id: e.getAttribute("data-id"),
                        name: e.innerText,
                        text: "Details: " + e.innerText,
                        barColor: "red",
                        barBackColor: "white"
                    };
                    DayPilot.Kanban.makeDraggable(item);
                }
            },
            init() {
                this.loadData();
                dp.init();
                this.addEventHandlers();
            }
        };
        app.init();