npm 包 ngx-dnd-jmcd 使用教程

背景介绍

前端开发趋势迅猛发展，随着业务需求的不断增加，我们的前端工程师需要更好的工具来支持其开发工作。包管理器 npm 就是这样一个强大的工具，它让前端工程师轻松地使用各种优秀的工具包。在众多的 npm 包中，ngx-dnd-jmcd 是一个帮助我们实现拖放交互效果的包。它设计的非常灵活，可以帮助我们实现多种不同场景的拖放效果。下面是本文将详细介绍该 npm 包的使用教程。

ngx-dnd-jmcd 简介

ngx-dnd-jmcd 是一个可以轻松创建拖放区域和拖动对象的 Angular 库。它是建立在 dnd-core 之上的，并且具有许多组件，指令和支持任何 HTML ELEMENT 的拖放操作。

安装 ngx-dnd-jmcd

您可以通过以下命令在您的项目中安装 ngx-dnd-jmcd：

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

需要注意的是，在安装之前，确保您已经安装了 Angular CLI。如果您还没有安装，请参阅在官方的安装指南。

使用 ngx-dnd-jmcd

接下来，我们将详细介绍如何使用 ngx-dnd-jmcd 包。

导入组件

在您的 Angular 项目中，您需要导入并在应用程序中注册 DragDropModule 规范，以使用 ngx-dnd-jmcd。

首先在您的 angular.json 文件中添加以下样式引入：

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

接下来，在 app.module.ts 文件中引用并注册 DragDropModule 组件

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

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

创建拖动元素

接下来我们假设您需要从列表中拖动一项到另一个区域。要实现这个场景，您可以通过 Angular 设计一个组件，让它具有拖放功能。

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

在该示例代码中，我们在外层 div 上指定了 item 的区域。在内部的 div 中，我们使用 *ngFor 循环渲染 items 列表。dongDropModule 的所有指令如示例中演示。

相关指令

ngx-dnd-jmcd 提供了多种指令，帮助您实现拖放效果。

ngx-dnd-list

应用于要排序的元素之一的 DOM 结果，此指令可将元素标记为可排序。它的值取决于项排序集合。你可以使用列表内部的任何属性来控制元素如何移动。此指令也可应用于条目容器的任何祖先上。

dragEnabled

添加到一个排序元素上的属性，表示该元素是否可被拖拽。当拖拽 disabled 设为 true 时，该元素无法被拖拽。默认值为 false。

ngx-dnd-sortable

可用于对项目进行排序。

[dragData]

排序列表中的数据绑定，可以用来指定拖动时传递的数据。

ngx-dnd-jmcd 示例

最后，我们提供了一个 ngx-dnd-jmcd 的完整示例代码，供大家参考。

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

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

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

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

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

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

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

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

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

总结

在本文中，我们介绍了如何在 Angular 应用程序中使用 ngx-dnd-jmcd 包来实现拖动效果。我们详细介绍了如何引入和使用 ngx-dnd-jmcd，还演示了一个完整的实例示例。相信通过学习本文，您已经基本掌握了如何使用 ngx-dnd-jmcd 包来实现拖放交互效果的方法。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056c5b81e8991b448e5e33

阅读全文

猜你喜欢

  • npm 包 jquery.autokana 使用教程

    在前端开发中，我们有时需要处理日语字符输入。jquery.autokana 是一个能够将日语的平假名和片假名（即：日语中的字母及其发音）转换为日语的片假名和平假名的jQuery 插件。

    3 年前
  • npm 包 map-sidebar-react 使用教程

    前言 在现代的 Web 应用中，地图组件是非常常见的功能之一，而在地图应用中，侧边栏(menu)也是很重要的一环，因为侧边栏可以显示地图相关的信息。目前，市场上有很多成熟的地图组件库，但是各库的侧边栏...

    3 年前
  • npm 包 @1backend/asdaasd-woot-ng 使用教程

    简介 1Backend 是一种基于云的工作方式，旨在让主机开发更轻松。 asdaasd-woot-ng 是 1Backend 提供的针对 Angular 的 npm 包，可以帮助开发者更轻松地在 An...

    3 年前
  • npm 包 mrsprite 使用教程

    前言 前端开发中，我们经常需要使用一些小图标来装饰页面。而这些小图标通常需要将多个图片合并成一张雪碧图，以通过减少请求次数提高页面加载速度。 推荐使用 mrsprite 这个 npm 包，它可以快速地...

    3 年前
  • npm 包 ding-robot 使用教程

    DingRobot 是一款用于发送钉钉消息的 npm 包，可用于前端项目中的自动化部署、定时任务提醒等场景。 本文将详细介绍如何使用 DingRobot。 安装 在项目根目录下，通过 npm 安装 D...

    3 年前
  • npm 包 agent-view-style 使用教程

    前言 随着前端开发技术的不断发展，越来越多的工具和框架出现在我们的视野中。其中，npm 包是前端开发不可缺少的一环。本文将介绍一款名为 agent-view-style 的 npm 包，这是一个轻量级...

    3 年前
  • npm 包 jsxdom 使用教程

    【前言】 随着前端技术的不断发展，越来越多的库和工具包涌现出来，npm 作为当前最流行的 JavaScript 包管理工具，便拥有了无尽的可能。而今天我们要介绍的这个库，就是旨在帮助前端工程师更方便快...

    3 年前
  • npm包kaefer-framework的使用教程

    简介 kaefer-framework（以下简称KF）是一个前端开发框架，它提供了一套快速构建web应用的解决方案，包括基础UI组件、路由、状态管理等功能。KF采用现代化的技术栈（React，Webp...

    3 年前
  • npm包react-vivus使用教程

    React-vivus是一个基于SVG的插件，可以帮助我们将矢量图像制作成动画的形式。这个插件可以结合React框架进行使用，非常方便，可以帮助我们实现更具动感的UI效果。

    3 年前
  • npm 包 kipo 使用教程

    介绍 kipo 是一个用于前端开发的命令行工具，它可以帮助开发者快速创建项目、生成页面模板、管理依赖等。它基于 Node.js 和 npm 包拓展而来，可以在 Mac、Linux 和 Windows ...

    3 年前
  • npm 包 egg-alipay-f2f 使用教程

    什么是 egg-alipay-f2f？ egg-alipay-f2f 是一个基于 Egg.js 框架编写的支付宝当面付（F2F）支付集成插件。它可以帮助开发者快速集成支付宝当面付功能，从而实现线下支付...

    3 年前
  • npm 包 imageoptimize 使用教程

    在前端开发中，优化网站性能和用户体验是非常重要的任务之一。其中，图片的优化和压缩在很大程度上可以提高网站的性能和加载速度。本文将向大家介绍一款优秀的 npm 包：imageoptimize，它可以帮助...

    3 年前
  • NPM 包 tstoast 使用教程

    tstoast 是一个开源的前端 Toast 组件库，基于 TypeScript 开发，提供了可定制且易于使用的提示框组件。在该组件库的帮助下，开发者可以轻松地在他们的项目中添加 Toast 组件，为...

    3 年前
  • npm 包 feature-maybe 使用教程

    在前端开发过程中，我们经常需要在不同的环境下使用不同的功能或者特性。一个常见做法是使用版本控制工具，根据不同的分支或者标签打包出不同的版本。但是这种方式会导致代码冗余，管理不便。

    3 年前
  • npm 包 generator-typescript-rxjs-webpack 使用教程

    在前端开发中，Webpack 是目前最热门的前端打包工具之一，而 RxJS 是一种强大的响应式编程工具。如果你正在寻找一个可以快速生成 TypeScript、Webpack 和 RxJS 程序的脚手架...

    3 年前
  • npm 包 ng2-qrcode-reader 使用教程

    什么是 ng2-qrcode-reader ng2-qrcode-reader 是一个 Angular 2+ 平台下的二维码扫描器 npm 包，使用摄像头来读取并解码二维码。

    3 年前
  • npm 包 ngx-autolinked 使用教程

    前言 在前端开发中，自动链接是一个常见的需求，特别是在处理一些包含 URL 的文本数据时。ngx-autolinked 是一个非常方便的 npm 包，提供了自动链接的功能。

    3 年前
  • npm 包 twitter2pg-cli 使用教程

    Twitter2pg-cli 是一个 npm 包，它可以将 Twitter 数据流提取到 PostgreSQL 数据库中。它是一个非常重要的工具，可以帮助前端开发人员在他们的项目中使用 Twitter...

    3 年前
  • npm 包 minimorph 使用教程

    在前端开发中，我们经常需要对 DOM 元素进行操作和修改。使用 JavaScript 可以很方面地实现这些功能，但是对于大型项目来说，手动操作 DOM 元素是非常繁琐和容易出错的。

    3 年前
  • npm 包 cities-as-json 使用教程

    介绍 在前端开发中，经常需要使用城市列表相关的数据。而 npm 包中的 cities-as-json 就是一个提供城市数据的工具包。 cities-as-json 可以以 JSON 格式返回全球的城市...

    3 年前

相关推荐

    暂无文章