Card Moving

Card moving using drag and drop is enabled by default.

• You can disable it using CardMoveHandling property.
• The Kanban control fires CardMove and CardMoved events as soon as the user drops the card at the target location.

JavaScript

Disable card moving

<div id="dp"></div>

<script type="text/javascript">

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

</script>

Notify the server about the move

<div id="dp"></div>

<script type="text/javascript">

    var dp = new DayPilot.Kanban("dp");
    dp.columns.list = [
        {name: "Analysis", id: "1", barColor: "#f9ba25"},
        {name: "Draft", id: "2"},
        {name: "Testing", id: "3"}
    ];
    dp.cards.list = [
        {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."}
    ];
    dp.onCardMoved = function(args) {
        $.post("/cardMoved", {
          card: args.card.data.id,
          column: args.column.data.id,
          position: args.position
        },
        function(data) {
          dp.message("Move saved.");
        });
    };
    dp.init();

</script>