什么是 oilerjs
oilerjs 是一个专为前端设计的、轻量的拖拽库,可快速构建可视化操作界面,减少开发难度,并提高生产效率。其主要特点是简单易用、对依赖关系的处理更好、支持自由拖拽和组合,在快速构建可视化操作界面方面具有很大的优势。
安装 oilerjs
可以直接在命令行中使用 npm 安装,安装命令如下:
--- - ------- ------
如果你的项目使用的是 yarn,可以使用以下命令安装 oilerjs:
---- --- -------
安装依赖
oilerjs 本身并不自带任何依赖,但是为了使其更加方便易用,我们需要额外引入一个依赖,那就是 jquery-ui
。可以通过 npm 安装:
--- - --------- ------
或者通过 CDN 引入该库:
------- ------------------------------------------------------------------
快速上手
下面给出一个简单的示例,帮助你快速上手。首先在 HTML 文件中引入相关的库和样式:
--------- ----- ----- ---------- ------ ----- ---------------- ---------------------- ----- ---------------- ------------------------------------------------------------------- ------ ---------------- ---------- - ------ ------ ------- ------ ------- --- ----- ----- - ---- - ------ ------ ------- ------ ----------------- ----- - -------- ------- ------ ---- --------------------- ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------ ------- ------------------------------------------------------------------------ -------- ------------ - ----- --------- - ------------------- ----- ----- - --- ----------------- -------------------------------- -- ---- --- ----------------------------------------------- --- --------- ------- -------
上面的代码会创建一个在 id 为 container
的 div 内的红色正方形,你可以尝试拖动该正方形。
API 参考
构造函数
--- --------------- -- ----------
参数:
container
:表示要在哪个容器内建立可视化界面,类型为 DOM 元素。注意,该容器必须设定宽度和高度。options
:一个可选的参数对象,包含以下属性:grid
:表示拖拽时平移的最小单位,类型为数字,单位像素,默认值为 1。
实例方法
registerDraggable(selector [, options])
说明:注册一个可拖拽的元素,将其加入到可视界面中。
参数:
selector
:一个 CSS 选择器字符串,表示要注册的元素。options
:一个可选的参数对象,包含以下属性:css
:一个对象,表示要为拖拽元素应用的 CSS 样式;width
:一个数字,表示拖拽元素的宽度;height
:一个数字,表示拖拽元素的高度;x
:一个数字,表示拖拽元素的初始 x 坐标;y
:一个数字,表示拖拽元素的初始 y 坐标。
unregisterDraggable(selector)
说明:注销一个已注册的拖拽元素。
参数:
selector
:一个 CSS 选择器字符串,表示要注销的拖拽元素。
on(eventName, handler)
说明:绑定一个事件处理函数。
参数:
eventName
:一个字符串,表示要绑定的事件名,目前支持以下事件:dragstart
:拖拽开始事件;drag
:拖拽事件;dragstop
:拖拽停止事件;add
:元素添加事件;remove
:元素删除事件。
handler
:一个函数,表示要响应该事件的处理函数。
总结
本文介绍了前端 npm 包 oilerjs 的使用方法,包括安装、依赖库、快速上手以及 API 参考等内容。oilerjs 的优点在于简单易用、对依赖关系的处理更好、支持自由拖拽和组合,在可视化界面的构建上有很大的优势。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066fac3d1de16d83a67178