You can add custom active areas to the card div.

html5 kanban card active areas

JavaScript

The active areas can be specified using "areas" property of the card data item.

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

<script type="text/javascript">

    var dp = new DayPilot.Kanban("dp");
    dp.columns.list = [
        {name: "New", id: "1", barColor: "#f9ba25"},
        {name: "Draft", id: "2"},
        {name: "Implementation", 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.", barColor: "#ea3624", areas: [
            {right: 0, top: 0, width: 20, height:20, cssClass: "card-info", html: "i", style: "text-align:center", action:"JavaScript", js: function(card) { alert("name: " + card.data.name);}}
        ]}
    ];
    dp.init();
    
</script>