• Settings
    • Locale
    • Change the locale of the datepicker, schedule and client side validation messages.

      Language
      English
      English
      English
      French
      German
      German
      German
      Italian
      Korean
      Spanish
      Catalan
      Dutch
      Portuguese
      Portuguese
      Arabic
      Arabic
      Bulgarian
      Bangla
      Bosnian
      Czech
      Greek
      Estonian
      Persian
      Finnish
      Danish
      Hindi
      Indonesian
      Icelandic
      Croatian
      Japanese
      Hungarian
      Hebrew
      Georgian
      Central Kurdish
      Khmer
      Kyrgyz
      Kazakh
      Lithuanian
      Latvian
      Malay
      Norwegian
      Polish
      Romanian
      Russian
      Slovak
      Slovenian
      Serbian
      Serbian
      Swedish
      Thai
      Turkish
      Ukrainian
      Uzbek
      Vietnamese
      Chinese
      Chinese
  • Resources

Kanban Dragging

Kanban supports touch dragging, board dragging, drag handles and per-board drop restrictions. Kanban is a board component for visualizing workflow and managing tasks with drag-and-drop, including touch drag-and-drop on mobile devices. Based on jkanban by Riktar.

Kanban Tag Documentation

Kanban board component for visualizing workflow and managing tasks with drag-and-drop functionality.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
addItemButton boolean false false Enable add item button on each board.
bindContextMenu String false Client-side id of a PrimeFaces contextMenu component to bind to right-click events.
dragBoards boolean false true Enable board (column) dragging and reordering.
dragHandle boolean false false Enable drag handle on items. When enabled, only the handle area is draggable, preventing accidental drags on the card body.
draggable boolean false true Enable drag-and-drop functionality.
extender String false JavaScript function to extend the widget configuration.
gutter String false 15px Gutter (spacing) between boards in CSS units, e.g. "15px".
responsivePercentage boolean false false If true, boards use percentage-based widths instead of fixed pixel widths.
style String false Inline CSS style of the component.
styleClass String false Style class of the component.
touchDraggable boolean false false Enable touch drag-and-drop on mobile devices.
value List true List of KanbanColumn objects representing the kanban board columns and items.
widthBoard String false 250px Default width of each board in CSS units, e.g. "250px".
Tag Documentation Widget Source Basic Interaction Dragging
Touch Drag

Set touchDraggable to enable touch drag-and-drop for mobile devices.

Board Dragging

Reorder entire boards (columns) by dragging them. Use dragBoards to enable or disable it and the dragBoard / dragendBoard events to react.

Drag Handles

With dragHandle only the handle icon of an item is draggable, which prevents accidental drags on cards with interactive content. The handle style is set via the extender.

Drop Restrictions

Use the dragTo property of a column to list the columns items may be dropped into. Items follow a strict workflow (Backlog, In Progress, Review, Done); restricted columns are dimmed while dragging and disallowed drops are cancelled.

Usage


<style>
    .kanban-item-title {
        font-weight: 600;
    }

    .kanban-item-description {
        font-size: 0.8rem;
        opacity: 0.7;
        margin-top: 2px;
    }

    #formTouchDrag .kanban-board header.kanban-todo,
    #formDragHandle .kanban-board header.kanban-todo { background-color: #4f46e5; color: #fff; }
    #formTouchDrag .kanban-board header.kanban-inprogress,
    #formDragHandle .kanban-board header.kanban-inprogress { background-color: #ea580c; color: #fff; }
    #formTouchDrag .kanban-board header.kanban-done,
    #formDragHandle .kanban-board header.kanban-done { background-color: #16a34a; color: #fff; }

    #formBoardDrag .kanban-board header.kanban-discovery { background-color: #8b5cf6; color: #fff; }
    #formBoardDrag .kanban-board header.kanban-design { background-color: #f59e0b; color: #fff; }
    #formBoardDrag .kanban-board header.kanban-development { background-color: #3b82f6; color: #fff; }
    #formBoardDrag .kanban-board header.kanban-testing { background-color: #10b981; color: #fff; }

    #formDropRestrictions .kanban-board header.kanban-backlog { background-color: #6b7280; color: #fff; }
    #formDropRestrictions .kanban-board header.kanban-inprogress { background-color: #3b82f6; color: #fff; }
    #formDropRestrictions .kanban-board header.kanban-review { background-color: #f59e0b; color: #fff; }
    #formDropRestrictions .kanban-board header.kanban-done { background-color: #10b981; color: #fff; }
    .kanban-board.disabled-board { opacity: 0.3; }

    .drag_handler { margin-right: 8px; float: left; }
    .drag_handler_grip {
        float: left;
        width: 16px;
        height: 24px;
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: grab;
        opacity: .3;
        transition: opacity .15s;
    }
    .drag_handler_grip:hover { opacity: .7; }
    .drag_handler_grip_icon {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--p-text-muted-color);
        box-shadow: 0 -6px 0 var(--p-text-muted-color), 0 6px 0 var(--p-text-muted-color);
    }
</style>

<div class="card">
    <h5>Touch Drag</h5>
    <p>Set <code>touchDraggable</code> to enable touch drag-and-drop for mobile devices.</p>
    <h:form id="formTouchDrag">
        <p:messages id="messages" showSummary="true" showDetail="true"/>

        <pe:kanban id="kanban"
                    widgetVar="kanbanTouchWidget"
                    value="#{kanbanController.columns}"
                    draggable="true"
                    touchDraggable="true"
                    addItemButton="true"
                    style="height:400px">
            <p:ajax event="drop" listener="#{kanbanController.onDrop}" update="messages" />
            <p:ajax event="itemAdd" listener="#{kanbanController.onAddItem}" update="kanban messages" />
        </pe:kanban>
    </h:form>
</div>

<div class="card">
    <h5>Board Dragging</h5>
    <p>Reorder entire boards (columns) by dragging them. Use <code>dragBoards</code> to enable or disable it and the <i>dragBoard</i> / <i>dragendBoard</i> events to react.</p>
    <h:form id="formBoardDrag">
        <p:messages id="messages" showSummary="true" showDetail="true"/>


        <div style="margin-bottom:8px">
            <p:outputLabel for="dragBoards" value="Board Dragging" styleClass="font-bold" style="margin-right:8px" />
            <p:selectOneMenu id="dragBoards" value="#{kanbanBoardDragController.dragBoards}" style="width:120px">
                <f:selectItem itemLabel="Enabled" itemValue="true" />
                <f:selectItem itemLabel="Disabled" itemValue="false" />
                <p:ajax update="kanban" process="@this" />
            </p:selectOneMenu>
        </div>

        <pe:kanban id="kanban"
                    widgetVar="kanbanBoardDragWidget"
                    value="#{kanbanBoardDragController.columns}"
                    draggable="true"
                    dragBoards="#{kanbanBoardDragController.dragBoards}"
                    style="height:450px">
            <p:ajax event="drop" listener="#{kanbanBoardDragController.onDrop}" update="messages" />
            <p:ajax event="dragBoard" listener="#{kanbanBoardDragController.onDragBoard}" update="messages" />
            <p:ajax event="dragendBoard" listener="#{kanbanBoardDragController.onDragendBoard}" update="messages" />
        </pe:kanban>
    </h:form>
</div>

<div class="card">
    <h5>Drag Handles</h5>
    <p>With <code>dragHandle</code> only the handle icon of an item is draggable, which prevents accidental drags on cards with interactive content. The handle style is set via the <code>extender</code>.</p>
    <h:form id="formDragHandle">
        <p:messages id="messages" showSummary="true" showDetail="true"/>


        <div style="margin-bottom:8px">
            <p:outputLabel for="dragHandle" value="Drag Handle" styleClass="font-bold" style="margin-right:8px" />
            <p:selectOneMenu id="dragHandle" value="#{kanbanDragHandleController.dragHandle}" style="width:120px">
                <f:selectItem itemLabel="Enabled" itemValue="true" />
                <f:selectItem itemLabel="Disabled" itemValue="false" />
                <p:ajax update="kanban" process="@this" />
            </p:selectOneMenu>

            <p:outputLabel for="handleStyle" value="Handle Style" styleClass="font-bold" style="margin:0 8px 0 16px" />
            <p:selectOneMenu id="handleStyle" value="#{kanbanDragHandleController.handleStyle}" style="width:140px">
                <f:selectItem itemLabel="Default" itemValue="default" />
                <f:selectItem itemLabel="Grip" itemValue="grip" />
                <p:ajax update="kanban" process="@this" />
            </p:selectOneMenu>
        </div>

        <pe:kanban id="kanban"
                    widgetVar="kanbanDragHandleWidget"
                    value="#{kanbanDragHandleController.columns}"
                    draggable="true"
                    dragHandle="#{kanbanDragHandleController.dragHandle}"
                    extender="#{kanbanDragHandleController.extender}"
                    style="height:400px">
            <p:ajax event="drop" listener="#{kanbanDragHandleController.onDrop}" update="messages" />
        </pe:kanban>
    </h:form>
    <h:outputScript>
        function kanbanDragHandleDefault() {}

        function kanbanDragHandleGrip() {
            this.cfg.itemHandleOptions = {
                customCssHandler: 'drag_handler_grip',
                customCssIconHandler: 'drag_handler_grip_icon'
            };
        }
    </h:outputScript>
</div>

<div class="card">
    <h5>Drop Restrictions</h5>
    <p>Use the <code>dragTo</code> property of a column to list the columns items may be dropped into. Items follow a strict workflow (Backlog, In Progress, Review, Done); restricted columns are dimmed while dragging and disallowed drops are cancelled.</p>
    <h:form id="formDropRestrictions">
        <p:messages id="messages" showSummary="true" showDetail="true"/>

        <pe:kanban id="kanban"
                    widgetVar="kanbanDropRestrictionsWidget"
                    value="#{kanbanDropRestrictionsController.columns}"
                    draggable="true"
                    style="height:450px">
            <p:ajax event="drop" listener="#{kanbanDropRestrictionsController.onDrop}" update="messages" />
        </pe:kanban>
    </h:form>
</div>