@bhobbs/ng2-dragula 使用教程

概述

@bhobbs/ng2-dragula 是一个 Angular 拖拽 UI 组件库，它基于 dragula 库而来，并且依赖于 ng2 和 RxJS。

安装

使用 npm 安装：

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

使用

  1. 在需要使用拖拽组件的模块中引入 ng2-dragula：
------ - ------------- - ---- ----------------------
-----------
  -------- -
    -- ---
    -----------------------
  --
  -- ---
--
------ ----- --------- - -
  1. 在组件模板中使用 ng2-dragula：
---- --------------------- -------------------------
  ---- ----------- ---- -- ---------------------
------
  1. 在组件类中初始化和监听拖拽事件：
------ - -------------- - ---- ----------------------
------------
  -- ---
--
------ ----- ----------- ---------- ------ -
  ----- - ------ --- ----- --- ----- ----
  ------------------- --------------- --------------- - -
  ---------- -
    -------------------
    ----------------
    ------------- -- -- -- -
      -----------------------------
    ---
    -------------------
    ----------------
    ------------- -- -- -- -
      --------------------------------
    ---
  -
-

示例

下面是一个基础的拖拽示例：

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

总结

@bhobbs/ng2-dragula 提供了一种轻松集成和使用拖拽 UI 组件的方式，能够让开发人员快速实现可拖拽的交互功能。此外，它还支持多种配置和监听拖拽事件，可以满足开发中各种复杂场景的需求。

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

阅读全文

猜你喜欢

  • npm 包 nunjucks-webpack-loader 使用教程

    前言 nunjucks-webpack-loader 这个 npm 包是一个用于在 Webpack 中编译 nunjucks 模板的 loader。它可以帮助开发者在前端项目中更加便捷地使用 nunj...

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

    在现代的前端开发中，我们经常需要实现用户与网页交互的操作。而其中的手势操作是一个越来越流行的需求，因此使用 react-use-gestures 这个 npm 包来实现手势操作可以使我们的开发更简单、...

    3 年前
  • npm 包 @jesterxl/hm-doc 使用教程

    简介 @jesterxl/hm-doc 是一个用于生成前端文档的 npm 包，它能够自动生成 Markdown 格式的注释文档，并将其转化为静态 HTML 页面。它可以大大减少手写文档的工作量，提高代...

    3 年前
  • npm 包 bch-wallet-bridge 使用教程

    前言 bch-wallet-bridge 是一款面向使用 Bitcoin Cash（BCH）作为数字货币的开发人员的 npm 包，其作用是将前端交互和 BCH 钱包服务进行桥接。

    3 年前
  • npm 包 moretv-tast 使用教程

    前言：moretv-tast 是一个基于 Puppeteer 的 Nodejs 库，用于进行 UI 自动化测试。它的特点是功能强大且易用，支持中文操作及断言，同时具有良好的扩展性与定制性。

    3 年前
  • npm 包 moretv-toast 使用教程

    前言 在前端开发过程中，我们常常需要使用各种工具和插件来提高效率以及优化用户体验。本文将介绍一个常用于移动端 Toast 提示的 npm 包“moretv-toast”，并提供详细且有深度的使用教程和...

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

    前言 在前端开发中，树形结构的数据展示是很常见的需求，而 react-expandable-treeview 是一个很好用的 npm 包，能够方便地实现树形结构的数据展示。

    3 年前
  • NPM 包 vue-cli-locale-th 使用教程

    在前端开发中，很多时候我们需要使用不同的编程语言和工具来完成项目，而其中不可避免的一些问题就是语言和地域的差异，比如语言的翻译和地域的适配。在 Vue.js 开发中，如果我们需要使用泰国语言版本，那么...

    3 年前
  • npm 包 genmap2d 使用教程

    介绍 genmap2d 是一个快速生成二维地图的 npm 包。它可以根据提供的配置参数快速生成具有地图感的二维数组。 安装 --- ------- --------使用 使用 genmap2d 的方法...

    3 年前
  • npm 包 simple-logger-node 使用教程

    npm 是前端领域的常用包管理器，它能够帮助我们快速、高效地安装和管理各种依赖项。其中，simple-logger-node 是一款适用于 Node.js 环境的简单的日志记录工具，提供了多种输出格式...

    3 年前
  • npm包react-native-credit-card-input-vertical使用教程

    简介 React Native是一种用于移动应用程序开发的开源框架。作为一种跨平台的技术，它可以使用JavaScript和React语言构建应用程序，同时遵循原生性。

    3 年前
  • npm 包 @charge/sdk 使用教程

    简介 @charge/sdk 是一个用于接入 Charge 计费支付平台的 Node.js SDK，方便前端开发人员接入 Charge 平台，实现收款功能，使用方便，同时具有稳定、高效的特性。

    3 年前
  • npm 包 @hernad/f18-node 使用教程

    前言 在前端开发过程中，我们经常会使用到各种第三方的依赖包，这些依赖包可以大大提高我们的开发效率。其中，npm 是前端常用的包管理工具，可以用来查找、安装、卸载、更新等操作。

    3 年前
  • npm 包 @jujorie/html-2-angularjs-plugin 使用教程

    在前端开发当中，经常需要将 HTML 页面整合入 AngularJS 项目中，以实现更高级的交互效果。然而，将 HTML 页面整合入 AngularJS 项目中并不是一件很简单的事，特别是对于新手开发...

    3 年前
  • npm 包 @kingjs/descriptor.scorch 使用教程

    介绍 @kingjs/descriptor.scorch 是一款用于对象描述符（descriptor）操作的 npm 包，提供了丰富的 API ，可以轻松的进行对象描述符的编辑操作。

    3 年前
  • npm 包 @kingjs/descriptor.write 使用教程

    npm 作为一个 JavaScript 包管理工具，为开发者提供了很好的便利。其中 @kingjs/descriptor.write 是一个非常实用的 npm 包，能够用于快速编写 JavaScrip...

    3 年前
  • npm 包 external-load 使用教程

    在 Web 开发中，前端开发不可避免的需要使用各种外部资源，如图片、字体、样式文件等等。在 Web 应用程序中，加载这些资源可以使用 HTML 的链接和脚本标记。 但是这并不能完全解决前端开发问题，一...

    3 年前
  • npm 包 rjs-calendar 使用教程

    rjs-calendar 是一个轻量级的 JavaScript 日历库，提供了丰富的功能和可定制性。它可以在 Web 应用程序中方便地添加日历功能，适用于多种应用场景。

    3 年前
  • npm 包 @mattkrick/event-source-polyfill 使用教程

    介绍 在前端开发过程中，我们有时需要对服务器端推送的数据进行处理，这就要用到 Server-Sent Event（SSE）技术。在浏览器端，我们可以使用 EventSource API 来与服务器端建...

    3 年前
  • npm 包 ipyiframe 使用教程

    背景 ipyiframe 是一个基于 Jupyter 的交互式开发环境，旨在为开发者提供更高效、更灵活的科学计算和数据分析工具。本文将介绍如何使用 npm 包 ipyiframe 构建一个可交互的前端...

    3 年前

相关推荐

    暂无文章