ng2-drag-and-check 是一个 Angular 2+ 的拖拽和检查组件库。它可以帮助我们快速搭建一个拖拽项目并检查是否正确。
安装
你可以通过以下命令来安装 ng2-drag-and-check：
npm install ng2-drag-and-check --save
使用
首先需要导入 DragAndCheckModule：
-- -------------------- ---- -------
------ - ------------------ - ---- ---------------------
---
-----------
-------- -
---
------------------
--
---
--
------ ----- --------- - -然后就可以在 HTML 中使用该组件了：
<ng2-drag-and-check></ng2-drag-and-check>
属性
ng2-drag-and-check 有一些有用的属性，可以控制组件的行为。以下属性是可用的：
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| items | any[] | [] | 一个数组，包含所有的元素和它们的目标。 |
| targetColor | string | #fff | 目标的默认颜色。 |
| placeholderColor | string | #eee | 占位符的默认颜色。 |
| backgroundColor | string | #fff | 拖拽区域的默认背景颜色。 |
| showInstructions | boolean | true | 是否展示指令。 |
| instructionText | string | 自定义指示文本。 | |
| instructionTextColor | string | #333 | 自定义指示文本的颜色。 |
| instructionTextSize | string | 16px | 自定义指示文本的字体大小。 |
例子
以下是一个简单的示例，演示如何使用 ng2-drag-and-check 组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------------------
----------
- ------ ---- ------- --- --
- ------ ---- ------- --- -
--
----------------------
--
--
------ ----- ------------ --在上面的代码中，我们创建了一个包含两个元素的项目数组。每个项目都有一个值和目标属性（这是我们要匹配的元素值）。在这个例子中，我们要匹配 1 和 2，2 和 1。
结论
ng2-drag-and-check 是一个非常有用的 Angular 2+ 组件库，可以帮助我们轻松地创建拖拽项目，并进行检查。通过这篇文章，你已经了解了如何安装和使用该库，以及一些有用的属性和示例。希望这篇文章对你有所帮助，让你更好地理解和使用 ng2-drag-and-check。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c581e8991b448e8e6a