npm包ng2-dragula-edit使用教程

简介

ng2-dragula-edit 是一个基于Angular2的拖拽组件，可以快速搭建拖拽操作的界面。它支持几乎所有主流浏览器，包括桌面和移动设备。 本文将介绍如何使用ng2-dragula-edit。

安装ng2-dragula-edit

你可以使用npm来安装ng2-dragula-edit：

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

使用ng2-dragula-edit

在编写代码前，需要先导入 DragulaModule 和 DragulaService。

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

要使用 DragulaModule，需要在你的应用程序中导入它：

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

在 HTML 中，使用 dragula 指令来创建面板，并使用 dragulaModel 指令来添加属性。

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

我们也可以定义多个容器：

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

并初始化模型：

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

交换拖拽时需要做一些处理，使用 DragulaService 来监听事件：

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

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

完整示例代码

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

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

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

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

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

结语

ng2-dragula-edit 是一个非常好用的拖拽组件，帮助我们快速创建交互界面。本文已经介绍了如何在 Angular2 应用程序中使用 ng2-dragula-edit，希望对大家能有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 camelize-keys 使用教程

    在前端开发中，我们经常需要处理从后端返回的 JSON 数据。在处理这些数据时，可能会遇到一些下划线分割的键名（例如：user_name），这样的键名对于人类来说可读性较差。

    2 年前
  • npm包 fetch-thru使用教程

    在前端开发过程中，我们常常需要向后端请求数据，而这往往需要使用浏览器提供的 fetch API。然而，我们也会遇到一些需要多次请求的情况，这就需要我们分别处理每个请求的返回结果。

    2 年前
  • npm 包 dcbia-good 使用教程

    前言 dcbia-good 是一个能够帮助开发者快速搭建良好前端开发环境的 npm 包，它包含了最新的前端开发技术和必要的组件。有了它的帮助，我们可以不用手动配置前端开发环境，直接快速地开始我们的前端...

    2 年前
  • npm 包 expirment-mathjs 使用教程

    前言 如果你是一名前端开发人员，那么 npm 包 experiment-mathjs 肯定是一个非常好用的数学计算库。该库提供了强大的数学计算功能，包括代数运算、数学函数、单位换算和表达式求解等功能，...

    2 年前
  • npm 包 noob-init-9f 使用教程

    引言 在前端开发领域，我们经常会使用第三方的 npm 包来提高开发效率。而 noob-init-9f 就是一款能够帮助前端新手更快地搭建项目的 npm 包。本文将为大家介绍 noob-init-9f ...

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

    前言 在前端开发中，我们经常需要在网页中嵌入一些外部应用或者模块。这时候，我们就需要使用嵌入式窗口来实现这个功能。在 React 开发中，npm 包 react-embedded-window 就是一...

    2 年前
  • npm包 angular2-simple-slider 使用教程

    介绍 angular2-simple-slider是一种基于Angular 2的简单滑动组件。它的特点是功能强大，易于使用，兼容性好等等，可以完美地满足前端开发者的需求。

    2 年前
  • npm 包 ghorg 使用教程

    什么是 ghorg？ ghorg 是一个 Node.js 模块，它可以帮助你快速创建、克隆和管理 GitHub 组织（Organization）和团队（Team）。

    2 年前
  • npm 包 vue-emoji-component 使用教程

    前言 随着社交网络的发展，表情包已经成为生活中必不可少的元素之一。在前端开发中，如何方便地使用表情包已经成为了一个实际的问题。在这篇文章中，我将介绍一款名为 vue-emoji-component 的...

    2 年前
  • npm 包 karma-webpack-typescript 使用教程

    1. 前言 karma-webpack-typescript 是一个基于 Karma 和 Webpack 的测试工具，它能够支持 TypeScript 和 ES6+ 语法，它的使用能够方便我们进行前端...

    2 年前
  • npm 包 serverless_ned 使用教程

    简介 serverless_ned 是一款基于前端技术的 npm 包，能够帮助开发者快速创建 serverless 应用，实现自动化部署和自动化扩容。该工具简单易用，兼容多种语言，可以大大提高开发效率...

    2 年前
  • npm 包 v-togg 使用教程

    介绍 v-togg 是一个基于 Vue.js 的开关组件库，支持各种自定义样式和颜色，旨在为前端开发者提供快速、轻松的开关元素。 安装 通过 npm 安装 v-togg： --- ------- --...

    2 年前
  • npm 包 dependency-tree-lint 使用教程

    在前端开发中，我们经常会使用第三方的包来实现功能，但是在使用过程中，我们可能会遇到一些问题，比如： 某个包的版本与我们的代码不兼容 某个包依赖的其他包已经废弃或存在安全隐患 某个包中含有重复的依赖关...

    2 年前
  • npm 包 gradiate 使用教程

    介绍 gradiate 是一个基于 nodejs 的命令行工具，用于帮助前端开发人员快速生成渐变背景色的 CSS 代码。它可以生成水平、垂直、对角线和扩展四种类型的渐变颜色，并支持自定义起始和结束颜色...

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

    在前端开发过程中，我们常常会使用到各种 npm 包来协助我们完成任务。raml-express 是一款旨在简化使用 RAML（RESTful API Modeling Language）创建 API ...

    2 年前
  • npm包redux-recovery使用教程

    本文将介绍一个npm包：redux-recovery，它是一个可以在Redux中增加撤销/重做功能的库。通过这个库，你可以让你的Redux应用程序具有更好的用户体验和可靠性。

    2 年前
  • npm 包 @vijay122/react-tiles 使用教程

    在前端开发中，我们难免需要用到各种各样的组件库。而 React 作为一款流行的前端框架，为我们提供了丰富的组件库。今天，我们要介绍的就是其中一个非常优秀的组件库，它就是 @vijay122/react...

    2 年前
  • npm 包 bz-swiper 使用教程

    前言 在前端开发中，我们经常会用到轮播图，而使用现成的框架或者组件库可以大大提高开发效率。在众多的组件库中，swiper 应该算得上是最受欢迎的之一了。不过，如果你想要更灵活、更高度自定义的轮播图组件...

    2 年前
  • npm包koa-pug-jade使用教程

    简介 koa-pug-jade是一个采用pug语言的koa模板引擎。本文将对如何使用koa-pug-jade进行详细的介绍，包括安装、配置以及使用。同时，我们将讲述其中的一些深度知识和使用技巧，为读者...

    2 年前
  • npm包noomz-ng2-tag-input使用教程

    在前端的开发过程中，组件库和工具集非常重要。只需要在npm上搜索，就能找到数以万计的npm包。这些npm包有些很强大，有些则只是实用工具。本文将介绍一款非常便捷且使用广泛的npm包——noomz-ng...

    2 年前

相关推荐

    暂无文章