npm 包 cu-ng2-dragula 使用教程

介绍

cu-ng2-dragula 是一个基于 drag and drop 的 Angular 2+ 拖放库。它是开源项目 ng2-dragula 的一个扩展，它提供了更多的功能和自定义选项。

本文将为大家介绍 cu-ng2-dragula 的使用教程，包括安装、配置、使用步骤以及示例代码。

安装

首先，需要在项目根目录下安装 cu-ng2-dragula 和 dragula：

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

配置

  1. 在 app.module.ts 中导入 cu-ng2-dragula 和 DragulaModule：
------ - ------------------ - ---- -----------------
------ - ------------- - ---- --------------

-----------
  ------------- -
    ------------
  --
  -------- -
    --------------
    -----------------------------
    -----------------------
  --
  ---------- ---
  ---------- --------------
--
------ ----- --------- - -
  1. 在组件的 constructor 中注入 DragulaService：
------ - -------------- - ---- --------------

------------------- --------------- --------------- - -
  1. 使用 dragulaService 方法创建并注册 drag-and-drop 组：
---------- -
  ----- ----- - --------------------------------------------- -
    ------ -------- ---- ---------- ------- -
      ------ ---------------- --- ---------------
    -
  ---

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

这里 GROUP_NAME 是 drag-and-drop 组的名称，HANDLE_CLASS 是要用于拖拽的 HTML 元素类名。dropModel 将提供拖放事件的回调函数。

使用步骤

  1. 首先，将可拖动的元素放入 drag-and-drop 组中：
---- -------------------------
  ---- -----------------------
    ---- ---- ------- ---
  ------
------

这里，GROUP_NAME 是在配置中定义的组名称。应用 dragula 指令后，元素将可以被拖拽并按照拖拽的顺序进行排序。

  1. 接下来，将可放置的元素放入相同的 drag-and-drop 组中：
---- ------------------------ -----------------------------
  ---- ---------------------- ----------- ---- -- ------------ --- -------- -------------------
    ---- ---- ------- ---
  ------
------

这里，ITEMS_ARRAY 是一个数组，其中包含可拖放元素的数据，使用 dragulaModel 属性进行绑定。在 drag-and-drop 组中，元素将自动完成放置和排序。使用 data-id 属性指定元素的索引。

示例代码

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

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

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

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

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

总结

cu-ng2-dragula 是一个简单易用的 Angular 2+ 拖放库，可以帮助开发者在前端范畴内实现拖放功能。本文简要介绍了 cu-ng2-dragula 的安装、配置和使用教程，并提供了示例代码。希望本文对大家能有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 migriere-es 使用教程

    前言 migriere-es 是一个基于 Elasticsearch 的数据迁移工具，专门用于实现 Elasticsearch 的索引迁移和数据迁移功能。 在前端开发中，我们通常会遇到需要进行 Ela...

    2 年前
  • npm 包 recursive-array-concat 使用教程

    在前端开发中，我们经常会涉及到处理数组的问题。而且在实际场景中，我们通常会遇到需要将多维数组合并为一维数组的情况。如果单纯使用 JavaScript 的原生数组方法，我们就需要编写一些高嵌套的循环操作...

    2 年前
  • npm 包 bootcamp-cli 使用教程

    前言 在前端开发中，我们经常会使用一些第三方包来提高工作效率和代码质量。而 npm（Node.js 包管理器）则成为了前端开发者必不可少的工具之一。在使用这些第三方包时，我们需要了解如何安装、使用以及...

    2 年前
  • npm 包 starwars-galaxy-names 使用教程

    介绍 在前端开发中，为了更好的开发体验和提高效率，我们通常会依赖一些第三方库或包。而 npm 就是一个非常流行的 JavaScript 包管理器。其中一个有趣的 npm 包就是 starwars-ga...

    2 年前
  • NPM包Kartotherian Autogen使用教程

    什么是Kartotherian Autogen？ Kartotherian Autogen是一个JavaScript开发的NPM包，是用于自动生成Map数据的库，可以帮助您更方便地创建地图。

    2 年前
  • npm 包 ng-golden-layout 使用教程

    在前端开发中，布局是一个非常重要的部分。而 ng-golden-layout 正是一个强大的工具，它可以帮助我们快速、轻松地创建复杂的布局。本文将详细介绍 ng-golden-layout 的使用方法...

    2 年前
  • npm 包 react-dcfinder 使用教程

    前言 React 是一个优秀的前端框架，并且有大量的社区支持，我们可以选择合适的 npm 包来帮助我们开发更高效更优秀的项目。在这篇文章中，我将向大家介绍一个名为 react-dcfinder 的 n...

    2 年前
  • npm 包 collect-transform-stream 使用教程

    在前端开发中，使用流式数据处理可以大大提高代码的复用性和可读性，同时也能够提高程序运行效率。而在流式数据处理的过程中，一个优秀的 npm 包 collect-transform-stream 就能发挥...

    2 年前
  • npm 包 csvy 使用教程

    介绍 csvy 是一个 Node.js 模块，可以将 CSV 文件转换为 JSON 格式的数据。它可以非常方便地将 CSV 文件导入到 JavaScript 应用中。

    2 年前
  • npm 包 muted-password-prompt 使用教程

    介绍 在前端开发中，我们经常需要让用户输入密码。但是在一个公共场合，例如图书馆、咖啡厅等地，其他人可能会轻易地窥探到我们输入的密码，这会给我们带来安全隐患。 为此，我们需要使用一个安全的密码输入框，让...

    2 年前
  • npm 包 react-progress-steps-peacock 使用教程

    “react-progress-steps-peacock” 是一个基于 React 的进度条组件，它可以让你轻松地创建具有丰富样式和动画的步骤进度条。在本篇文章中，我们将详细介绍如何使用该包，包括下...

    2 年前
  • npm 包 dymo-generator 使用教程

    前言 随着 Web 应用程序的发展，前端技术变得越来越重要。在开发过程中，使用 npm 包成为一种越来越流行的方式。 本文将介绍一个名为 dymo-generator 的 npm 包，它是一种用于生成...

    2 年前
  • npm 包 node-red-auth-contrib-bluemix 使用教程

    前言 在现代前端开发中，使用 npm 包已经是司空见惯的事情了。npm 包是 Node.js 生态系统的重要组成部分，它能够快速、方便地实现开发过程中涉及到的各种功能。

    2 年前
  • npm 包 generator-express-architect 使用教程

    简介 generator-express-architect 是一个快速构建 Express 应用程序的 Yeoman 生成器。该包可以帮助开发者快速生成一套完整的 RESTful API 应用程序。

    2 年前
  • npm 包 Lantana 使用教程

    前言 Lantana 是一个强大的前端工具库，它包含了大量的工具函数和工具类，有助于提高前端编程效率，同时也可以提升代码的可读性和可维护性。本文将详细介绍 Lantana 的使用方法，包括安装、导入和...

    2 年前
  • npm包 nodebb-plugin-meteor-email-account 使用教程

    在开发Node.js应用程序时，使用npm包可以帮助我们更高效地完成各种功能。其中，nodebb-plugin-meteor-email-account是一个非常有用的npm包，它可以帮助我们实现me...

    2 年前
  • npm 包 plain-music 使用教程

    介绍 npm 包 plain-music 是一个用于演示音乐播放的基础库，可帮助开发者快速搭建音乐播放器，实现音乐的播放、暂停、进度条控制、音量调节等基本功能。 安装 使用 npm 安装： --- -...

    2 年前
  • npm 包 sass-collection 使用教程

    简介 sass-collection 是一个提供了多种常用 sass mixin 和函数的 npm 包，使得前端开发人员在项目中能够更加高效地使用 sass，并在样式的编写过程中提高了代码的可维护性和...

    2 年前
  • npm 包 @platoai/protos 使用教程

    @platoai/protos 是一个用于前端开发的 npm 包，它能够让你更加方便地处理数据结构和 proto 协议。本教程将介绍如何使用这个包以及它的深度和学习意义。

    2 年前
  • npm 包 content-type-router 使用教程

    在前端开发中，很多时候需要根据请求的 Content-Type 来处理数据，这时候我们可以使用 content-type-router 这个 npm 包来帮助我们快速而且准确地处理请求。

    2 年前

相关推荐

    暂无文章