引言
ember-ui-sortable 是一个基于 Ember.js 的 UI 排序组件库，它提供了一个易于使用的方式来实现拖放排序。这个库支持 touch，mouse 和 pointer 事件并兼容所有现代浏览器。本文将介绍如何安装和使用这个库。
安装
第一步是安装该库。你可以使用 npm 来安装：
npm install ember-ui-sortable --save
使用
概述
ember-ui-sortable 是一个组件库，它为允许拖动排序而设计。简而言之，它允许我们通过拖动元素来改变它们的顺序。
使用 ember-ui-sortable 的第一步是将其导入你的 Ember.js 应用程序。默认情况下，它会导出两个组件:sortable-group 和 sortable-item。sortable-group 是一个容器，用于包含 sortable-item 组件。
示例
下面是一个基本的示例。它允许你拖拽可排序的元素来改变它们的顺序。
-- -------------------- ---- -------
-- -------------------------
------ --------- ---- -------------------
------ - - - ---- ---------------
------ ------- ------------------
------ ----- -- -- -- -- ----
-------- -
---------------------- -
----------------- -------------
-
-
----- -------------------- ---- -------
----- ------------------------------------ ----
----------------- ----------------- ------------ -- ---------
------- ----- -- --------
---------------- --------- -------------
--------
------------------
---------
-------------------当你加载这个组件时，你应该看到可排序的元素。你可以使用鼠标拖动这些元素来改变它们的顺序。当你拖动元素时，你将看到其他元素移动出它的位置，以实现排序。
API
这个组件库提供了一些可用的 API：
sortable-group
- onSortEnd: (function) 排序结束时的回调函数。
- direction: (string, optional) 排序方向。可选值为
horizontal或vertical。
sortable-item
- item: (object) 当前排序元素的数据。
- group: (object) 当前 sortable-group 组件的实例对象。
结论
ember-ui-sortable 是一个优秀的 UI 排序组件，它提供了可编辑的排序选项以及方便易用的 API。如果你需要给你的 Ember.js 应用添加拖放排序功能，给这个库一次尝试，你绝对不会失望。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ba563576b7b1ecc12