npm 包 mm-ng2-dnd 使用教程

1. 简介

mm-ng2-dnd 是一个 Angular 2 的拖放组件库，提供了一系列的指令和服务，方便开发者实现拖放功能。本文将为大家详细介绍如何使用和配置该组件库。

2. 安装和导入

使用 npm 安装 mm-ng2-dnd：

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

在 app.module.ts 中导入该包并添加到 import 数组中：

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

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

3. 使用指令

mm-draggable

mm-draggable 指令用于使元素可拖动。在 HTML 中添加指令：

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

可以通过配置属性实现对元素的控制：

  • dropZones：指定元素可以被拖动到哪些目标区域。dropZones 可以是一个字符串数组，也可以是一个返回字符串数组的函数。
  • dragData：传递到目标元素的数据。该值可以是任何类型。
---- 
  ---------------- ---------- --------- --------- --------- ------ --
-
  ------
------

mm-droppable

mm-droppable 指令用于使元素可接收拖放元素。在 HTML 中添加指令：

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

可以通过配置属性实现对元素的控制：

  • dropZones：指定元素接收哪些类型的拖放元素。dropZones 可以是一个字符串数组，也可以是一个返回字符串数组的函数。
  • onDropSuccess：接收到拖放元素后执行的回调函数。
---- 
  ---------------- ---------- --------- --------- -------------- ---------- --
-
  -------
------

mm-sortable

mm-sortable 指令用于使元素可进行排序。在 HTML 中添加指令：

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

可以通过配置属性实现对排序的控制：

  • dropZones：指定元素可排序的范围。dropZones 可以是字符串，也可以是返回字符串的函数。
  • dragStart：拖动开始时执行的回调函数。
  • dragEnd：拖动结束后执行的回调函数。
--- 
  ----------
  ------------------------
  -----------------------
  -----------------------------
  -------------------------
-
  --- ----------- ---- -- --------- ---- -------
-----

4. 使用服务

除了以上三个指令之外，mm-ng2-dnd 还提供了一些服务，方便实现各种场景下的拖放交互。

DragDropService

DragDropService 是一个全局的服务，用于在应用程序中共享数据和状态。可以通过 Angular 的依赖注入（DI）方式引入该服务，并调用对应的方法。

  • addDragData：添加数据到当前拖动的元素中。
  • getDragData：获取当前拖动元素中存储的数据。
  • removeDragData：从当前拖动元素中删除存储的数据。
------ - --------------- - ---- -------------

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

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

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

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

-

DragImageService

DragImageService 用于控制拖动图像的显示样式，可以通过 Angular 的 DI 引入该服务并在拖动开始时调用 show 方法，传递一个元素和偏移量即可。

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

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

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

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

-

5. 示例代码

完整的使用示例代码：（假设项目中已经引入了 Bootstrap 样式库）

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

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

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

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

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

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

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

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

6. 总结

mm-ng2-dnd 是一个非常方便实用的拖放组件库，通过使用该库，我们可以轻松实现拖放、排序等不同的交互场景。本文中我们详细介绍了如何使用指令和服务来配置和控制该组件库，希望可以对前端开发者们有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 @leichtgewicht/postgraphql 使用教程

    在现代的 Web 开发中，GraphQL 成为越来越受欢迎的解决方案，因为它可以帮助开发者快速构建强大的 API，并提供更好的开发体验。@leichtgewicht/postgraphql 就是一个基...

    2 年前
  • npm 包 karangoel16 使用教程

    karangoel16 是一个优秀的 npm 包，提供了强大的前端开发工具，让开发者可以更加便捷地进行前端项目的开发和调试。 本文将从以下几个部分详细介绍 karangoel16 的使用方法： ka...

    2 年前
  • npm 包 react-google-analytics-lite 使用教程

    当今的互联网世界中，网站流量数据是非常重要的指标。为了统计网站访问量，有许多统计工具可以使用，其中 Google Analytics 是最著名的工具之一。在开发网站的过程中，使用 Google Ana...

    2 年前
  • npm 包 react-jsonschema-form-n 使用教程

    简介 react-jsonschema-form-n 是一个开源的 React 组件库，用于快速创建基于 JSON schema 的表单。它可以自适应各种设备，包括桌面、移动等设备，同时提供了多种表单...

    2 年前
  • npm 包 sarathi-discovery-strategy 使用教程

    介绍 sarathi-discovery-strategy 是一个用于可扩展和高可用系统的发现策略模块。它可以帮助我们快速构建一个分布式系统，并在系统扩展时自动更新节点列表，同时保证系统的高可用性。

    2 年前
  • npm 包 vinay1 使用教程

    简介 vinay1 是一个用于在前端界面使用音频交互的 npm 包。它提供了一套简单易用的 API，让开发者可以轻松地将音频元素与前端交互。本篇文章将详细介绍如何使用 vinay1，带领读者从基础使用...

    2 年前
  • `npm` 包 `eslint-plugin-prettier-rules` 使用教程

    前言 在前端开发中，代码风格是十分重要的一方面，无论是个人还是团队，都应该遵循同样的规范来编写代码。这样做可以大幅降低代码维护成本，提高代码的可读性和可维护性。而 eslint 是现代化前端开发中最受...

    2 年前
  • npm 包 flexi-js 使用教程

    在前端开发中，很多时候我们需要处理各种不同的布局要求。而在处理布局时，CSS flexbox 成为了最常用的布局方式之一。但是对于一些复杂的布局场景，使用纯 CSS 实现可能会变得很困难。

    2 年前
  • npm 包 codemirror-mode-dust 使用教程

    前言 如今，随着网络的发展和人们对于网页交互体验的追求，前端技术已经成为互联网领域一个不可或缺的组成部分。而在前端技术中，使用较频繁的便是 codemirror。codemirror 提供了一个高度定...

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

    什么是 ember-cli-svn EmberCLI SVN 是一款基于 EmberCLI 框架的 SVN 版本控制插件。它可以方便地在 Ember 应用程序中使用 SVN 进行版本控制，可以让团队更...

    2 年前
  • npm 包 groundwork-cornerstone 使用教程

    什么是 npm 包？ npm 包是 npm （Node.js 包管理工具）中的一个概念，指的是在 npm 上提交的可复用的模块。这些模块可以是前端代码、后端代码、工具、框架等等。

    2 年前
  • npm 包 gulp-xml-collect 使用教程

    在前端开发中，我们经常需要对 XML 文件进行处理和解析。gulp-xml-collect 是一个非常实用的 npm 包，可以帮助我们简化 XML 文件的处理过程，提高开发效率。

    2 年前
  • npm 包 shmod 使用教程

    前言 在前端开发中，使用第三方工具包非常普遍，npm 作为世界上最大的软件注册表，拥有数量众多的开源工具包。我们在使用 npm 工具包时，经常会遇到需要修改文件权限的情况。

    2 年前
  • npm 包 uri-encode 使用教程

    随着前端开发的不断推进，我们经常会遇到需要对 URL 进行处理的情况。对于 URL 中的参数等特殊字符，我们需要进行编码以确保其正确传输和处理。而 uri-encode 这个 npm 包就是帮助我们完...

    2 年前
  • npm 包 lock-your-windows 使用教程

    在进行前端开发的过程中，我们经常需要使用一些第三方库或模块。但这些模块版本经常会发生变化，而我们的项目需要稳定的依赖，这就产生了依赖管理的问题。npm 包 lock-your-windows 就是一种...

    2 年前
  • npm 包 php-runtime 使用教程

    简介 在前端开发中，时常需要使用到后端的一些功能，例如对字符串的处理、时间格式化、加密等。php-runtime 就是一款能够在前端中使用 PHP 语言的工具，方便前端开发人员在前端代码中使用后端能力...

    2 年前
  • npm 包 @andromeda/attn 使用教程

    什么是 @andromeda/attn？ @andromeda/attn 包是一款专门为前端工程师设计的小型 JavaScript 库，主要用于实现页面元素的高亮、闪烁等特效，让用户更加直观地感受到页...

    2 年前
  • npm 包 slackaway 使用教程

    前言 在前端开发中，我们常常需要使用各种工具来提升开发效率。其中，npm 是 Node.js 的包管理工具，可以用来下载、管理和上传开发所需的各种依赖。 在 npm 中，有一个非常有用的工具包叫做 s...

    2 年前
  • npm 包 deep-slice 使用教程

    在前端开发中，我们经常需要对数组或对象进行操作，而 deep-slice 这个 npm 包则提供了一种方便、快捷的方式来操作多维数组和对象。本文将详细介绍 deep-slice 的使用方法，并附有示例...

    2 年前
  • npm 包 ember-empathy 使用教程

    简介 在前端开发中，我们经常需要管理多个组件之间的状态和数据流。这个过程可以比喻为“组件间的情感连接”，而 npm 包 ember-empathy 就是帮助我们实现这个过程的一个工具包。

    2 年前

相关推荐

    暂无文章