npm包 @wulf2468/ng2-dragula 使用教程

简介

@wulf2468/ng2-dragula是一个基于Angular2的拖拉指令库，它使用DragulaJS库来提供强大的拖拉功能。借助该库，你可以轻松地实现复杂的自定义拖拉，从而增强你的前端交互设计。

安装

要使用@wulf2468/ng2-dragula，首先需要安装它和DragulaJS库。你可以通过npm在你的项目中安装它们：

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

使用

使用@wulf2468/ng2-dragula很简单！只需按照以下步骤：

  1. 导入DragulaService：
------ ---------------- ---- ------------------------
  1. 在组件或指令中注入DragulaService：
------------------- --------------- --------------- - -
  1. 使用dragulaService.createGroup()方法创建一个Dragula组：
--------------------------------------------- -
  -------- ---------
  -------- --------
---
  1. 在拖拉元素上使用@wulf2468/ng2-dragula指令：
---- ----------------------------- -- ------------
  1. 你甚至还可以监听事件：
------------------------------------------ -- -
  ---
---
------------------------------------------ -- -
  ---
---

示例代码

1. 创建Dragula组

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

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

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

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

-

2. 监听drag和drop事件

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

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

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

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

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

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

-

结论

借助@wulf2468/ng2-dragula，你可以拥有一个强大的拖拉库，它将为你的前端界面提供卓越的交互体验，拥有丰富的选项和事件，使你能够快速实现自定义拖拉行为。现在，你可以开始使用它来改善自己的应用程序。

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

阅读全文

猜你喜欢

  • npm 包 gherkin-to-mocha 使用教程

    在进行软件开发过程中，测试是个不可或缺的环节。测试的好坏直接关系到软件的质量，而测试用例的编写则是测试的核心。最近，一款名为 gherkin-to-mocha 的 npm 包应运而生，它能够将 Ghe...

    3 年前
  • npm 包 react-native-iconfont-pmo 使用教程

    介绍 react-native-iconfont-pmo 是一款 React Native 中使用阿里云 Iconfont 的组件库，可以方便的使用图标字体。本教程将介绍如何使用该库。

    3 年前
  • npm 包 squash-object 使用教程

    Squash-object 是一种非常有用的工具，它可以将 JavaScript 对象中的多级嵌套属性整合为单层属性。这使得对象更容易被序列化，传输和存储。在前端开发中，它可以帮助我们更有效地组织和处...

    3 年前
  • npm 包 @dmartss/polisher 使用教程

    简介 @dmartss/polisher 是一个基于 postcss 的 CSS 处理工具，它可以自动优化 CSS 代码，去除冗余的样式，减小 CSS 文件的大小，提升页面加载速度。

    3 年前
  • npm 包 nodebb-plugin-pixeldrain 使用教程

    简介 NodeBB 是一个基于 Node.js 的论坛系统，是一个开源且高度可扩展的平台。而 pixeldrain 是一款图像、视频等多媒体文件的托管服务，它提供了 HTML5 播放器和对多媒体文件的...

    3 年前
  • npm 包 kmljs 使用教程

    KML 是一种地理信息标记语言，KMLJS 是一种轻量级的 JavaScript 库，可以用来解析、创建、编辑、呈现以及转换 KML 数据。本教程将介绍如何使用 npm 包 kmljs。

    3 年前
  • npm 包 @zthun/zwebstyles 使用教程

    什么是 @zthun/zwebstyles @zthun/zwebstyles 是一个基于 Bootstrap 的前端样式库。它提供了一组现代化和优美的样式，用于构建 Web 应用程序和网站。

    3 年前
  • npm 包 litecraft-yggdrasil 使用教程

    什么是 litecraft-yggdrasil？ litecraft-yggdrasil 是一个轻量级的 npm 包，它提供了 Minecraft 游戏使用的 Yggdrasil 身份验证服务的简单接...

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

    在前端开发中， gitmoji-cli-muwoo 是一款非常实用的 npm 包，它可以帮助我们有效地管理 git commit 的信息。在本文中，我们将介绍 gitmoji-cli-muwoo 的使...

    3 年前
  • npm 包 vue-language-switch 使用教程

    在前端开发中，多语言支持是一项不可或缺的功能。而使用 Vue.js 来实现多语言分别显得尤为简便和灵活。在本文中，我们将介绍如何使用 npm 包 vue-language-switch 实现多语言支持...

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

    介绍 generator-ink-cli是一个可以帮助我们快速生成基于Ink.js库的CLI(Command Line Interface)的npm包的Yeoman generator。

    3 年前
  • npm 包 cordova-plugin-offline-streaming 使用教程

    简介 cordova-plugin-offline-streaming 是一个 Cordova 插件，用于实现离线流媒体播放。它支持预下载和缓存音频和视频文件，并在离线情况下自动切换到缓存播放。

    3 年前
  • npm 包 isomorphic-style-loader--react-context 使用教程

    在前端开发过程中，我们经常需要使用到各种 npm 包来简化开发流程和提高开发效率。一个比较常用的 npm 包是 isomorphic-style-loader，它可以在服务端和客户端都使用同一份 CS...

    3 年前
  • npm 包 neeo-driver-kodi 使用教程

    前言 随着智能家居的发展，越来越多人开始使用 HA （Home Assistant）作为自己的家庭中枢。因为 HA 对于外设（如电视、音响、智能电器等）的支持非常完善，因此越来越多人使用 HA 来控制...

    3 年前
  • npm包@dignitary/interfaces使用教程

    前言 在前端开发中，我们使用许多不同的库来实现我们的应用程序。有时候，这些库需要处理与不同对象的交互和数据交换，为此我们需要使用类型定义和接口。如果你是一个 TypeScript 开发人员，你可能对这...

    3 年前
  • npm 包 linkfly-exp-react-mdc 使用教程

    介绍 linkfly-exp-react-mdc 是一个基于 Material Design 的 React 组件库，帮助开发者快速构建优美且功能强大的 web 应用程序。

    3 年前
  • npm 包 ts-web-framework 使用教程

    介绍 ts-web-framework 是一个基于 TypeScript 的 Web 开发框架，提供了一系列的工具和功能，可以使 Web 开发更加高效、快速。它支持自定义插件和中间件，提供了模板渲染、...

    3 年前
  • npm 包 @cortical/loader 使用教程

    在前端开发中，我们经常需要加载不同类型的文件，如 CSS、JS、图片、音频等。通常情况下我们会使用多个加载器来处理它们，这会使工程变得复杂。这时可以使用 @cortical/loader 来实现文件的...

    3 年前
  • npm 包 ng-diff-match-patch 使用教程

    在前端开发中，常常需要处理文本的对比，比如版本控制、富文本编辑、博客更新等等。ng-diff-match-patch 是一个 npm 上的文本对比库，能够实现类似 git diff 的功能，支持字符串...

    3 年前
  • npm 包 fastify-referrer-policy 使用教程

    在前端项目开发中，安全性一直是一个重要但容易被忽视的方面。其中之一便是设置正确的 Referrer-Policy，避免恶意攻击或数据泄露。而 fastify-referrer-policy 正是一个 ...

    3 年前

相关推荐

    暂无文章