Logo Logo

Documentation v8.0.38

  • General
  • jKanban Board
  • Fixed Height
Preview Downloads Purchase
jKanban is a pure agnostic Javascript plugin for Kanban boards. For more info see the official siteand the Github repository.

Fixed Height Example

Here's an example of jKanban Board with a fixed height. For more info, please visit the official website.
var element = '#kt_docs_jkanban_fixed_height';

var initjKanban = function () {
    // Get kanban height value
    const kanbanHeight = kanbanEl.getAttribute('data-jkanban-height');

    // Init jKanban
    var kanban = new jKanban({
        element: element,
        gutter: '0',
        widthBoard: '250px',
        boards: [{
            'id': '_fixed_height',
            'title': 'Fixed Height',
            'class': 'primary',
            'item': [
                {
                    'title': '<span class="fw-bold">Item 1</span>'
                },
                ...
            ]
        }
        ],

        // Handle item scrolling
        dragEl: function (el, source) {
            document.addEventListener('mousemove', isDragging);
        },

        dragendEl: function (el) {
            document.removeEventListener('mousemove', isDragging);
        }
    });

    // Set jKanban max height
    const allBoards = kanbanEl.querySelectorAll('.kanban-drag');
    allBoards.forEach(board => {
        board.style.maxHeight = kanbanHeight + 'px';
    });
}

const isDragging = (e) => {
    const allBoards = kanbanEl.querySelectorAll('.kanban-drag');
    allBoards.forEach(board => {
        // Get inner item element
        const dragItem = board.querySelector('.gu-transit');

        // Stop drag on inactive board
        if (!dragItem) {
            return;
        }

        // Get jKanban drag container
        const containerRect = board.getBoundingClientRect();

        // Get inner item size
        const itemSize = dragItem.offsetHeight;

        // Get dragging element position
        const dragMirror = document.querySelector('.gu-mirror');
        const mirrorRect = dragMirror.getBoundingClientRect();

        // Calculate drag element vs jKanban container
        const topDiff = mirrorRect.top - containerRect.top;
        const bottomDiff = containerRect.bottom - mirrorRect.bottom;

        // Scroll container
        if (topDiff <= itemSize) {
            // Scroll up if item at top of container
            board.scroll({
                top: board.scrollTop - 3,
            });
        } else if (bottomDiff <= itemSize) {
            // Scroll down if item at bottom of container
            board.scroll({
                top: board.scrollTop + 3,
            });
        } else {
            // Stop scroll if item in middle of container
            board.scroll({
                top: board.scrollTop,
            });
        }
    });
}

<div id="kt_docs_jkanban_fixed_height" class="kanban-fixed-height" data-jkanban-height="300"></div>