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

var dp = new DayPilot.Kanban("dp");
        dp.columns.list = [
            {name: "Analysis", id: "1", barColor: "#f9ba25"},
            {name: "Draft", id: "2"},
            {name: "Testing", id: "3"}
        ];
        dp.swimlanes.list = [
            {name: "Swimlane A", id: "A"},
            {name: "Swimlane B", id: "B"}
        ];
        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"
            },
        ];
        dp.init();


        function makeDraggable() {
            var parent = document.getElementById("external");
            var items = parent.getElementsByTagName("li");
            for (var i = 0; i < items.length; i++) {
                var e = items[i];
                var 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);
            }
        }

        makeDraggable();