介绍
mofron-comp-dropboard-kanban 是一个基于 mofron 的拖放式看板组件。当您想要实现看板的摆放方式非常灵活时，它是一个很好的选择。它能够自动将所包含的元素进行排序，并且允许您自由拖放和交换元素的位置。
安装
在您的项目中通过 npm 安装：
npm install mofron mofron-comp-dropboard-kanban
使用
在 HTML 文件中引入 mofron 和 mofron-comp-dropboard-kanban：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------------------------------
------- --------------------------------------------------
------- ----------------------------------------------------------------------------------------------
-------
------
---- ------ ---
---- --------------------
-------
-------接下来，您需要在 JavaScript 中设置一些参数来初始化看板。我们将通过一个小例子来演示看板如何工作：
-- -------------------- ---- -------
------------------
----------------------------------------
--- ----- - --- ----------------------------
-
---------- ----- ---- -- --------
----- -
---- ---- -
--- ---------------- ---- -- ---- -
--- ---------------- ---- -- ---- -
--- ---------------- --- -- ---- -
---
---- ---------- -
--- ---------------- ---- -- ---- -
--- ---------------- --- -- ---- -
---
-------- -
--- ---------------- ---- -- ---- -
--- ---------------- ---- -- ---- -
--- ---------------- --- -- ---- -
--
-
-
--
------------------ --------
------------- ------- ------ ----- ---- ---
--- -------------
------- ------------
------ -----
---可以通过 list 属性来定义看板各列中的元素和顺序。在这个例子中，我们定义了三个列表，包含了不同的任务。我们还定义了 drag_text 属性，它表示用户在拖拽元素时所展示的文本。
最后，我们将看板对象添加到我们之前创建的空容器中，并设置看板的样式和大小。
API
| 属性 | 描述 |
|---|---|
list |
看板的任务列表 |
drag_text |
拖拽时的文本 |
max_col |
列表的最大数量 |
drop_hover_cb |
鼠标经过一个洞分离时触发的回调 |
drop_drop_cb |
放下一个洞分离时触发的回调 |
drag_hover_cb |
鼠标经过一个洞分离时触发的回调 |
drag_out_cb |
将鼠标拖列出一个洞分离时触发的回调 |
drag_end_cb |
将元素拖出一个洞分离时触发的回调 |
结论
mofron-comp-dropboard-kanban 是一个非常强大的组件，为显示拖放式看板提供了更灵活的方式。您可以使用它来创建一个看板，以供自己的项目使用。请注意，它依赖于 mofron，因此作为先决条件，您需要将它安装到您的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607281e8991b448de9af