HN-kanbanboard/index.html at master · HasanNaser/HN-kanbanboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="dist/hn_kanbanboard.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="temp/enlighterjs.min.css" />


</head>

<body>


    <div style="width: 80%; margin: auto; text-align: center">

        <div id="myDiv"><h1>Hello People</h1></div>
    </div>

<div style="width: 70%; margin: auto">
    <h1>Example Code :</h1>

    <pre data-enlighter-language="less">

let lists = [
        {"id": "todo", "title": "Todo"},
        {"id": "doing", "title": "Doing"},
        {"id": "done", "title": "Done"}
        ]
let cards_ = [
    {"board_id": "todo","card_id": "1","card_title": "Card Drag/drop feature"},
    {"board_id": "todo","card_id": "2","card_title": "onCardclick function"},
    {"board_id": "done","card_id": "4","card_title": "setCards function"},
    {"board_id": "done","card_id": "5","card_title": "onCardAdded function"},
    {"board_id": "done","card_id": "8","card_title": "add new card feature"},
    {"board_id": "done","card_id": "34","card_title": ".........."},
];

let options = {
    container: "#myDiv",
    lists: lists,
    cards: cards_,
    onCardAdd: function (data) {
        //data.boardId, //data.title,
        console.info(data);
    },
    onCardDrgStart: function (evt) {
        //evt.currentList   :current list
        //evt.cardSelf      :card element
        console.info(evt)
    },
    onCardDrgEnd: function (evt) {
        //evt.listTo           : target list
        //evt.boardFrom       : previous list
        //evt.oldIndex        : element's old index within old parent
        //evt.newInde         : element's new index within new parent
        //evt.cardSelf        : card element
        console.info(evt)
    },
    onCardSortChange: function (evt) {
        //evt.currentList     :current list
        //evt.oldIndex        : element's old index within old parent
        //evt.newInde         : element's new index within new parent
        //evt.cardSelf        : card element
        console.info(evt)
    },
    onCardClick: function (data) {
        //data.title,
        //data.currentListId,
        //data.currentList,
        console.info(data);
    }
}


var nesne = HN_kanbanTable(options);
nesne.init();

    </pre>

</div>


    <script src="dist/hn_kanbanboard.js"></script>

    <script type="text/javascript" src="temp/enlighterjs.min.js"></script>
    <script src="demo.js"></script>
    <script src="https://use.fontawesome.com/8a4a932190.js"></script>

</body>

</html>