TaskDrag

//<code-header>
fiddle.title = 'Task drag';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        taskDrag       : true,
        columnToolbars : false
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Try TaskBoard', status : 'doing' },
            { id : 2, name : 'Test Scheduler', status : 'done' },
            { id : 3, name : 'Evaluate Gantt', status : 'doing' },
            { id : 4, name : 'Download Grid', status : 'todo' },
            { id : 5, name : 'Install Scheduler Pro', status : 'todo' }
        ],

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' },
            { id : 4, name : 'Emilia', image : 'emilia.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 },
            { id : 2, event : 2, resource : 2 },
            { id : 3, event : 3, resource : 3 },
            { id : 4, event : 4, resource : 4 },
            { id : 5, event : 5, resource : 1 },
            { id : 6, event : 1, resource : 2 },
            { id : 7, event : 2, resource : 3 },
            { id : 29, event : 3, resource : 1 }
        ]
    }
});

//<code-header>
fiddle.title = 'Task drag events';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        taskDrag       : true,
        columnToolbars : false
    },

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    listeners : {
        // beforeTaskDrop is triggered before a drop is finalized, returning false will abort the operation.
        // It accepts async listeners that will block the drop until they resolve, in this case used to show a basic
        // confirmation dialog
        async beforeTaskDrop({ taskRecords, targetColumn }) {
            // Show confirmation dialog
            const result = await MessageDialog.confirm({
                title   : 'Verify drop',
                message : `Please confirm moving ${taskRecords.map(t => `"${t.name}"`).join(', ')} to ${targetColumn.text}?`
            });

            // Returning false will abort the drop (if user pressed Cancel)
            return result === MessageDialog.okButton;
        },

        // taskDrop is triggered after a successful drop
        taskDrop({ taskRecords, targetColumn }) {
            Toast.show(`${taskRecords.map(t => `"${t.name}"`).join(', ')} was moved to ${targetColumn.text}`);
        },

        // taskDragAbort is triggered if a drag is aborted using ESC or if the drop was invalid
        taskDragAbort({ taskRecords }) {
            Toast.show(`Drag of ${taskRecords.map(t => `"${t.name}"`).join(', ')} aborted`);
        }
    },

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Drag me', description : 'To another column', status : 'doing' }
        ]
    }
});