Nestable 基于 jQuery 目录拖拽插件

发布于 2023-02-05 10:55:38 字数 2947 浏览 195 评论 0

Nestable 是一个基于 jQuery 目录拖拽插件,完美兼容 鼠标 和 触摸 操作。

用法

像这样编写嵌套的 HTML 列表:

<div class="dd">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle">Item 3</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="4">
                    <div class="dd-handle">Item 4</div>
                </li>
                <li class="dd-item" data-id="5">
                    <div class="dd-handle">Item 5</div>
                </li>
            </ol>
        </li>
    </ol>
</div>

然后像这样用 jQuery 激活:

$('.dd').nestable({ /* config options */ });

事件

change 重新排序项目时会触发该事件。

$('.dd').on('change', function() {
    /* on change event */
});

方法

您可以获得一个序列化对象,其中包含 data-* 每个项目的所有属性。

$('.dd').nestable('serialize');

上面示例的序列化 JSON 为:

[{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]

配置

您可以更改以下选项:

  • maxDepth 项目可以嵌套的级别数(默认 5
  • group 允许在列表之间拖动的组 ID(默认 0

这些高级配置选项也可用:

  • listNodeName 为列表创建的 HTML 元素(默认 'ol'
  • itemNodeName 为列表项创建的 HTML 元素(默认 'li'
  • rootClass 根元素的类.nestable()用于(默认 'dd'
  • listClass 所有列表元素的类(默认 'dd-list'
  • itemClass 所有列表项元素的类(默认 'dd-item'
  • dragClass 应用于正在拖动的列表元素的类(默认 'dd-dragel'
  • handleClass 每个列表项中内容元素的类(默认 'dd-handle'
  • collapsedClass 应用于已折叠列表的类(默认 'dd-collapsed'
  • placeClass 占位符元素的类(默认 'dd-placeholder'
  • emptyClass 用于空列表占位符元素的类(默认 'dd-empty'
  • expandBtnHTML 用于生成列表项展开按钮的 HTML 文本(默认 '<button data-action="expand">Expand></button>'
  • collapseBtnHTML 用于生成列表项折叠按钮的 HTML 文本(默认 '<button data-action="collapse">Collapse</button>'

项目地址:https://github.com/dbushell/Nestable

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84961 人气
更多

推荐作者

佚名

文章 0 评论 0

qq_Nk4xk9

文章 0 评论 0

mabiao

文章 0 评论 0

~~

文章 0 评论 0

坤阳

文章 0 评论 0

增幅人气の奥

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文