npm 包 ng-drag-to-reorder 使用教程

阅读时长 4 分钟读完

ng-drag-to-reorder 是一个 Angular 应用程序的 npm 包,用于实现列表拖拽排序功能。本文将详细介绍如何使用此 npm 包。

安装

使用 npm 安装 ng-drag-to-reorder

添加依赖

在你的 Angular 应用程序中的 app.module.ts 中,添加以下代码:

-- -------------------- ---- -------
------ - ------------------- - ---- ---------------------

-----------
  ------------- -
    -------------
  --
  -------- -
    --------------
    --------------------
  --
  ---------- ---
  ---------- --------------
--
------ ----- --------- - -

使用指南

通过把 ng-drag-to-reorder 的指令加到 html 标记上,即可开启列表拖拽排序功能。

基本使用

高级使用

ng-drag-to-reorder 可以在拖拽完成后执行指定的回调函数。你可以在回调函数中更新你的数据源。看下面的例子:

-- -------------------- ---- -------
------------
  --------- -----------
  --------- -
    --- --------------- ----------------------------------
      --- ----------- ---- -- --------------------
    -----
  -
--
------ ----- ------------- -
  ----- - --------- --------- ----------

  ------------------ ------------- -
    ----- --------- - ---------------------------------- ------
    -------------------------------- -- -----------
  -
-

自定义拖拽手柄

你可以自定义一个拖拽手柄来指定哪些元素可以拖拽。

在上面的例子中,只有 .my-handle 元素中的文本 "x" 才可以用来拖拽排序。

示例代码

-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ---------------------

------------
  --------- -----------
  --------- -
    --- --------------- ----------------------------------
      --- ----------- ---- -- ------------ ---------------------------------------
    -----
  -
--
------ ----- ------------- -
  ----- - --------- --------- ----------

  ------------------ ------------- -
    ----- --------- - ---------------------------------- ------
    -------------------------------- -- -----------
  -
-
-- -------------------- ---- -------
-------
  -- -
    ----------- -----
  -

  ---------- -
    ------- -----
    -------- -----
    ----------------- ----------
  -
--------

---------------------

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600563c481e8991b448e1235

纠错
反馈