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

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

安装

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

npm install ng-drag-to-reorder --save

添加依赖

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

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

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

使用指南

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

基本使用

<ul drag-to-reorder>
  <li *ngFor="let item of items">{{item}}</li>
</ul>

高级使用

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

<ul drag-to-reorder (reordered)="onReordered($event)">
  <li *ngFor="let item of items">{{item}}</li>
</ul>

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

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

自定义拖拽手柄

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

<ul drag-to-reorder dragHandle=".my-handle">
  <li *ngFor="let item of items"><span class="my-handle">x</span>{{item}}</li>
</ul>

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

示例代码

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

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

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

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

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

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

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