Cage 笼子容器
简介
笼子容器可将某元素限制在父容器当中，绝对不会超出；根据子元素与父元素的边距自动计算反弹效果。
功能特点
本框架的笼子容器插件axCage支持多种特性，满足一般场景需求。
- 四种外形的子元素，分别是baby、river、chimney和cover
- 支持放大缩小
- 支持以scroll和locate两种方式进行定位
- 自动监听父/子容器变化，自动调整父子相对位置
- 支持设置禁止拖动元素
- 支持拖动和漂移两种移动模式，默认拖动，可手动启用漂移
- 支持PC端和移动端操作
普通用法
确保有内外容器结构，理论上任意矩形的内容器均可拖动并限制拖动范围。对外容器使用axCage属性即可。
cover形状，即宽高都大于父容器
baby形状，即宽高都小于父容器
river形状，即宽大于父容器，高小于父容器
chimney形状，即高大于父容器，宽小于父容器
-
<h5>cover形状，即宽高都大于父容器</h5> <div class="ax-cage demo-cage cover" axCage> <div><img src="https://src.axui.cn/v2.0/public/images/china02.jpg" /></div> </div> <div class="ax-break"></div> <h5>baby形状，即宽高都小于父容器</h5> <div class="ax-cage demo-cage baby" axCage> <div><img src="https://src.axui.cn/v2.0/public/images/china02.jpg" /></div> </div> <div class="ax-break"></div> <h5>river形状，即宽大于父容器，高小于父容器</h5> <div class="ax-cage demo-cage river" axCage> <div><img src="https://src.axui.cn/v2.0/public/images/china02.jpg" /></div> </div> <div class="ax-break"></div> <h5>chimney形状，即高大于父容器，宽小于父容器</h5> <div class="ax-cage demo-cage chimney" axCage> <div><img src="https://src.axui.cn/v2.0/public/images/china02.jpg" /></div> </div> -
.demo-cage { border: 1px solid #ebebeb; height: 300px; width: 300px; } .demo-cage>*:first-child { background-color: lightpink; display: flex; justify-content: center; align-items: center; } .demo-cage>*:first-child img { object-fit: cover; width: 100%; height: 100%; } .demo-cage.cover>*:first-child { width: 500px; height: 500px; } .demo-cage.baby>*:first-child { width: 200px; height: 200px; } .demo-cage.river>*:first-child { width: 600px; height: 200px; } .demo-cage.chimney>*:first-child { width: 200px; height: 600px; }
使用布局
如果没有使用居中或居右布局或者定位，那么内容器通常是位于外容器的左上角，此时内容器的translate(css设置)值和offset(js获取)值相同；如果使用了布局或定位，那么两个值将发生偏差，插件会自动纠正偏差。
注意，由于子元素拖拽滑动是依靠transform的translate值变化，所以不可对内容器单独设置translate值。
-
<div class="ax-cage demo-cage baby" style="display: flex;justify-content: center;align-items: center;" axCage> <div><img src="https://src.axui.cn/v2.0/public/images/china02.jpg" /></div> </div> -
<同上>
初始化
对子元素位置初始化便是对子元素设置css偏移位置，可使用除了translate之外的所有css属性，比如position、margin等。以上布局示例也是位置初始化一种方式。
-
<div class="ax-cage demo-cage baby" axCage> <div style="position: absolute;left:30px;top:10px;"><img src="https://src.axui.cn/v2.0/public/images/china02.jpg" /></div> </div> -
<同上>
多个子元素
本插件支持一个或多个子元素同时拖拽；如果有多个子元素需要放在容器内，请使用position定位，否则可能会发生当前活动子元素被其他子元素覆盖的问题。活动的子元素z-index为11。
-
<div class="ax-cage demo-cage baby" axCage> <button class="ax-btn ax-primary" style="position: relative;">北京</button> <button class="ax-btn ax-error" style="position: relative;">上海</button> <button class="ax-btn ax-warning" style="position: relative;">重庆</button> </div> -
<同上>
禁止拖拽
使用unbound参数可设置禁止拖拽的子元素。该参数为一个对象，其属性如下：
- attr:对unbound节点设置的属性名，默认为“unbound”
- selector:禁止拖拽的选择器，可以是#id、.className等节点选择器，也可以是一个节点或节点数组
-
<div class="ax-cage demo-cage baby" axCage> <button class="ax-btn ax-primary" style="position: relative;">北京</button> <button class="ax-btn ax-error" style="position: relative;">上海</button> <button class="ax-btn ax-warning" style="position: relative;">重庆</button> </div> -
<同上>
漂移
默认拖拽不会产生漂移，如果需要启用请设置参数drift:enable:true。drift是一个对象，其属性如下：
- enable:默认false，设置true则启用
- timeTHR:时间阈值，默认200（单位ms），快速滑动小于200ms才会漂移
- distTHR:距离阈值，默认20px，即快速滑动距离超过20px才会漂移
- coef:漂移系数，默认为2，值越大漂移越远
-
<div class="ax-cage demo-cage baby" axCage="drift:{enable:true}"> <button class="ax-btn ax-primary">中国</button> </div> -
<同上>
缩放
插件支持滚轮和双指缩放，默认不启用，如果需要启用请设置参数scale:enable:true。scale是一个对象，其属性如下：
- enable:默认false，设置true则启用
- min:最小缩放倍数，默认为1即原本大小，请填写一个小于max的正整数
- max:最大缩放倍数，默认为5，请填写一个大于min的正整数
-
<div class="ax-cage demo-cage baby" style="display: flex;justify-content: center;align-items: center;" axCage="scale:{enable:true}"> <button class="ax-btn ax-primary">北京</button> <button class="ax-btn ax-error">上海</button> </div> <div class="ax-break"></div> <div class="ax-cage demo-cage baby" style="display: flex;justify-content: center;align-items: center;" axCage="scale:{enable:true}"> <div><img src="https://src.axui.cn/v2.0/public/images/china02.jpg" /></div> </div> -
<同上>
手动初始化
插件默认加载就执行初始化，但是在某些情况下默认并不希望使用笼子容器拖拽，而通过某个按钮开关触发笼子容器功能。首先设置参数init:false，然后对按钮开关绑定click事件执行this.init()方法即可。
-
<div class="ax-cage demo-cage baby" id="manual"> <div><img src="https://src.axui.cn/v2.0/public/images/china02.jpg" /></div> </div> <div class="ax-break"></div> <button type="button" class="ax-btn" id="manualBtn">手动初始化</button> -
let manualIns = new axCage('#manual', { init: false, }), manualBtn = document.querySelector('#manualBtn'); manualBtn.onclick = () => { manualIns.init(); } -
<同上>
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.targetDom：外容器this.slides：滑块数组，包含属性如下：- size：宽高尺寸
- dom：滑块节点
- now：当前偏移值（translate）
- last：上次偏移值（translate）
- difference：滑块和外容器宽高差值
- offset：滑块左上角与容器左上角偏移值（offsetLeft和offsetTop）
- shape：滑块外形
- scale：滑块缩放倍数
- boundary：缩放边界（min或max）
- range：滑块偏移值范围（translate）
- active：活动状态，被拖拽时为true
- disabled：禁用状态（不可拖拽或缩放），使用remove方法后创建，使用add方法后清除
this.targetHeight：外容器高度this.targetWidth：外容器宽度this.hypotenuse：外容器矩形对角边长度this.unbounds：不可拖拽节点数组this.destroyed：销毁状态
内部操作方法如下：
this.init(callback)：初始化完成，支持一个参数即回调函数，回到无参数this.fitTo(opt)：贴合边缘，支持一个参数，该参数为一个对象，属性如下：- item：将要贴合的对象，默认为第一个子对象，可填子元素节点、#id节点选择器或子对象（来自this.slides）
- duration：css动画运动时间，默认同插件参数duration，可自定义时间，单位ms
- placement：将要贴合的位置，默认“left-top”，可选择的值有：left-top、left-bottom、right-top、right-bottom、left、right、top和bottom
- callback：回调函数，贴合后执行，支持一个参数即子对象
this.slideTo(opt)：一定滑块到指定位置，支持一个参数，该参数为一个对象，属性如下：- item：将要贴合的对象，默认为第一个子对象，可填子元素节点、#id节点选择器或子对象（来自this.slides）
- value：translate值，该属性值为一个对象，例如value:{x:50,y:100}
- duration：css动画运动时间，默认同插件参数duration，可自定义时间，单位ms
- callback：回调函数，贴合后执行，支持一个对象参数{raw,correction,item}（传入的原始值，校正值和子对象）
this.response(item='all')：重新获取外容器和子节点的尺寸值、差值并修正translate偏移值，支持一个参数item，其写法如下：- 'all'：更新父容器和所有子元素
- 'parent'：仅更新父容器
- 'children'：仅更新所有子元素
- #id选择器/节点/子对象：仅更新某个子元素
this.setValues(opt)：设置css的transform值，包括设置translate和scale值，参数opt为一个对象，属性如下：- item：将要设置值的对象，默认为第一个子对象，可填子元素节点、#id节点选择器或子对象（来自this.slides）
- type：设置值类型，默认translate，可选择scale或zero(scale设为1，translate设为0)
- value：设置的值，可为一个数字或者一个对象，例如value:{x:150,y:100}
- apply：是否将value值赋予item.last和item.now，默认true，translate类型下有效
this.getValues(item)：获得子元素的transform值，返回一个数组，例如[1,0,0,1,100,200]；参数说明如下：- item：将要获取值的对象，可填子元素节点、#id节点选择器或子对象（来自this.slides）
this.update(setting,callback)：更新参数并重新渲染节点，参数说明如下：- setting：将要更新的参数，例如：setting={active:3,multiple:false}
- callback：回调函数，无参数
this.updateTarget()：更新外容器尺寸，无参数this.updateItem(obj)：更新子元素尺寸，支持一个参数，默认为第一个子对象，可有三种写法：- 1、为类似#id节点选择器字符串，将从子元素找到匹配的子对象（来自this.slides）
- 2、子节点，以子节点匹配到子对象（来自this.slides）
- 3、来自this.slides的一项
this.add(data,callback)：添加新的笼子元素，支持两个参数：- data：可填#id、.className等节点选择器，或某个节点，或节点数组
- callback：回调函数，支持一个参数即刚添加的子元素对象
this.remove(data,callback)：移除笼子元素，支持两个参数：- data：可填#id、.className等节点选择器，或某个节点，或节点数组
- callback：回调函数，支持一个参数即刚移除的子元素对象
this.reset()：重置实例(scale设为1，translate设为0)，无参数this.destroy(callback)：销毁实例，支持回调函数，回调无参数
-
<div class="ax-cage demo-cage baby" id="method"> <button class="ax-btn ax-primary">北京</button> </div> <div class="ax-break"></div> <button class="ax-btn" id="toLT">到左上角</button> <button class="ax-btn" id="toRT">到右上角</button> <button class="ax-btn" id="toLB">到左下角</button> <button class="ax-btn" id="toRB">到右下角</button> <button class="ax-btn" id="toL">到左边</button> <button class="ax-btn" id="toR">到右边</button> <button class="ax-btn" id="toT">到上边</button> <button class="ax-btn" id="toB">到下边</button> <button class="ax-btn" id="toTranslate">x偏移50,y偏移100</button> <button class="ax-btn" id="toScale">放大两倍</button> <button class="ax-btn" id="view">查看子元素</button> <button class="ax-btn" id="reset">重置</button> <div class="ax-break"></div> <div class="ax-break"></div> <div class="ax-cage demo-cage cover" id="method2"> <div><img src="https://src.axui.cn/v2.0/public/images/china02.jpg" /></div> </div> <div class="ax-break"></div> <button class="ax-btn" id="toLT2">到左上角</button> <button class="ax-btn" id="toRT2">到右上角</button> <button class="ax-btn" id="toLB2">到左下角</button> <button class="ax-btn" id="toRB2">到右下角</button> <button class="ax-btn" id="toL2">到左边</button> <button class="ax-btn" id="toR2">到右边</button> <button class="ax-btn" id="toT2">到上边</button> <button class="ax-btn" id="toB2">到下边</button> <button class="ax-btn" id="toTranslate2">x偏移50,y偏移100</button> <button class="ax-btn" id="toScale2">放大两倍</button> <button class="ax-btn" id="view2">查看子元素</button> <button class="ax-btn" id="reset2">重置</button> -
let methodIns = new axCage('#method', { scale: { enable: true } }), toLT = document.querySelector('#toLT'), toLB = document.querySelector('#toLB'), toRT = document.querySelector('#toRT'), toRB = document.querySelector('#toRB'), toL = document.querySelector('#toL'), toR = document.querySelector('#toR'), toT = document.querySelector('#toT'), toB = document.querySelector('#toB'), toTranslate = document.querySelector('#toTranslate'), toScale = document.querySelector('#toScale'), view = document.querySelector('#view'), reset = document.querySelector('#reset'); toLT.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns.fitTo({ placement: 'left-top' }); } toLB.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns.fitTo({ placement: 'left-bottom' }); } toRT.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns.fitTo({ placement: 'right-top' }); } toRB.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns.fitTo({ placement: 'right-bottom' }); } toL.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns.fitTo({ placement: 'left' }); } toR.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns.fitTo({ placement: 'right' }); } toT.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns.fitTo({ placement: 'top' }); } toB.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns.fitTo({ placement: 'bottom' }); } toTranslate.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns.slideTo({ value: { x: 50, y: 100 } }); } toScale.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns.setValues({ value: 2, type: 'scale' }); } view.onclick = () => { console.log(methodIns.slides[0]); } reset.onclick = () => { methodIns.reset(); } let methodIns2 = new axCage('#method2', { scale: { enable: true } }), toLT2 = document.querySelector('#toLT2'), toLB2 = document.querySelector('#toLB2'), toRT2 = document.querySelector('#toRT2'), toRB2 = document.querySelector('#toRB2'), toL2 = document.querySelector('#toL2'), toR2 = document.querySelector('#toR2'), toT2 = document.querySelector('#toT2'), toB2 = document.querySelector('#toB2'), toTranslate2 = document.querySelector('#toTranslate2'), toScale2 = document.querySelector('#toScale2'), view2 = document.querySelector('#view2'), reset2 = document.querySelector('#reset2'); toLT2.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns2.fitTo({ placement: 'left-top' }); } toLB2.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns2.fitTo({ placement: 'left-bottom' }); } toRT2.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns2.fitTo({ placement: 'right-top' }); } toRB2.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns2.fitTo({ placement: 'right-bottom' }); } toL2.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns2.fitTo({ placement: 'left' }); } toR2.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns2.fitTo({ placement: 'right' }); } toT2.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns2.fitTo({ placement: 'top' }); } toB2.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns2.fitTo({ placement: 'bottom' }); } toTranslate2.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns2.slideTo({ value: { x: 50, y: 100 } }); } toScale2.onclick = () => { //默认操作第一个子对象，容器中只有一个子元素，所以不需要写item参数了 methodIns2.setValues({ value: 2, type: 'scale' }); } view2.onclick = () => { console.log(methodIns2.slides[0]); } reset2.onclick = () => { methodIns2.reset(); } -
<同上>
添加和删除
通过add方法可给加入容器的节点作为新的笼子元素；而remove方法相反，移除笼子元素（不可拖动或缩放）。
-
<div class="ax-cage demo-cage baby" id="add"> <button class="ax-btn ax-primary" style="position: relative;">北京</button> <button class="ax-btn ax-error" style="position: relative;" id="disabled">上海</button> <button class="ax-btn ax-warning" style="position: relative;">重庆</button> </div> <div class="ax-break"></div> <button type="button" class="ax-btn" id="addElem">仅追加一个节点</button> <button type="button" class="ax-btn" id="addCage">新加点变为笼子元素</button> <button type="button" class="ax-btn" id="removeCage">取消“上海”</button> -
let addIns = new axCage('#add'), disabled = document.querySelector('#disabled'), addElem = document.querySelector('#addElem'), addCage = document.querySelector('#addCage'), removeCage = document.querySelector('#removeCage'), elem = axAddElem('button', { type: 'button', class: 'ax-btn' }, '南京(不可移动)'); addElem.onclick = () => { addIns.targetDom.appendChild(elem); } addCage.onclick = () => { elem.innerHTML = '南京(可移动了)'; addIns.add(elem,(items)=>{ console.log('新增了：',items) }); } removeCage.onclick = () => { disabled.innerHTML = '上海(不可移动)'; addIns.remove(disabled,(items)=>{ console.log('移除了：',items) }); } -
<同上>
更新参数
通过update方法可更新参数，支持两个参数：
- setting：将要修改的参数，写法同options
- callback：回调函数，无参数
-
<div class="ax-cage demo-cage baby" id="update"> <button class="ax-btn ax-primary">北京</button> </div> <div class="ax-break"></div> <button type="button" class="ax-btn" id="updateBtn">更新参数，可缩放可漂移</button> -
let updateIns = new axCage('#update'), updateBtn = document.querySelector('#updateBtn'); updateBtn.onclick = () => { updateIns.update({ drift: { enable: true, }, scale: { enable: true, } }); } -
<同上>
销毁实例
通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。
-
<div class="ax-cage demo-cage baby" id="destroy"> <button class="ax-btn ax-primary">北京</button> </div> <div class="ax-break"></div> <button type="button" class="ax-btn" id="destroyBtn">销毁</button> <button type="button" class="ax-btn" id="initBtn">重新初始化</button> -
let destroyIns = new axCage('#destroy'), destroyBtn = document.querySelector('#destroyBtn'), initBtn = document.querySelector('#initBtn'); destroyBtn.onclick = () => { destroyIns.destroy(); } initBtn.onclick = () => { destroyIns.init(); } -
<同上>
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onInit初始化后执行，无参数onCompleted/completed四周拖出空白，达到阈值（默认20px）执行，支持一个参数direction（拖拽方向）onStart/start鼠标/手指按下后执行，支持一个参数即当前子对象onMove/move鼠标/手指移动后执行，支持一个参数即当前子对象onEnd/end鼠标/手指放开后执行，支持一个参数即当前子对象onScaled/scaled缩放后执行，支持两个参数即当前子对象和旧值onScaledMin/scaledMin缩放最小后执行，支持两个参数即当前子对象和最小缩放值onScaledMax/scaledMax缩放最大后执行，支持两个参数即当前子对象和最大缩放值onTranslated/translated移动后执行，支持两个参数即当前子对象和旧值onRefactored/refactored节点发生变化后（增/减）执行，无参数onAdd/add新增笼子元素后执行，支持一个参数即新增加的子元素数组onRemove/remove移除笼子元素后执行，支持一个参数即移除的子元素数组onResized/resized尺寸变化后执行，支持两个参数：ResizeObserver监听到的对象和改变尺寸的对象onFitted/fitted使用this.fitTo方法后执行，支持一个参数即当前子对象onSlided/slided使用this.slideTo方法后执行，支持一个对象参数，包含三个属性即raw原始值，correction修正值和item移动对象onDestroy/destroy销毁后执行，无参数
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
<div class="ax-cage demo-cage baby" id="on"> <button class="ax-btn ax-primary">北京</button> </div> <div class="ax-break"></div> <button type="button" class="ax-btn" id="onRB">移动到右下角</button> <button type="button" class="ax-btn" id="onTrans">偏移{x:50,y:20}</button> <button type="button" class="ax-btn" id="onSize">按钮变大</button> <button type="button" class="ax-btn" id="onHMTL">按钮增加内容</button> <button type="button" class="ax-btn" id="onRemove">不可拖拽</button> <button type="button" class="ax-btn" id="onAdd">可拖拽</button> <button type="button" class="ax-btn" id="onDestroy">销毁</button> <button type="button" class="ax-btn" id="onInit">重新初始化</button> -
let onIns = new axCage('#on', { scale: { enable: true }, drift: { enable: true }, }), child = document.querySelector('#on').firstElementChild, onRBBtn = document.querySelector('#onRB'), onTransBtn = document.querySelector('#onTrans'), onSizeBtn = document.querySelector('#onSize'), onHMTLBtn = document.querySelector('#onHMTL'), onAddBtn = document.querySelector('#onAdd'), onRemoveBtn = document.querySelector('#onRemove'), onDestroyBtn = document.querySelector('#onDestroy'), onInitBtn = document.querySelector('#onInit'); onIns.on('fitted', () => { console.log('靠边了'); }).on('slided', () => { console.log('移动了'); }).on('scaled', () => { console.log('缩放了'); }).on('scaledMin', () => { console.log('缩放到最小'); }).on('scaledMax', () => { console.log('缩放到最大'); }).on('completed', (direction) => { console.log('离开边缘20px了：',direction); }).on('resized', (target) => { console.log('尺寸变化',target); }).on('add', (items) => { console.log('添加了新的笼子元素',items); }).on('remove', (items) => { console.log('移除了笼子元素',items); }).on('destroy', () => { console.log('销毁了实例'); }).on('init', () => { console.log('实例初始化了'); }) onRBBtn.onclick = () => { onIns.fitTo({ placement: 'right-bottom' }); } onTransBtn.onclick = () => { onIns.slideTo({ value: { x: 50, y: 20 } }); } onSizeBtn.onclick = () => { child.classList.add('ax-lg'); } onHMTLBtn.onclick = () => { child.innerHTML = '乌鲁木齐'; } onAddBtn.onclick = () => { onIns.add(child); } onRemoveBtn.onclick = () => { onIns.remove(child); } onDestroyBtn.onclick = () => { onIns.destroy(); } onInitBtn.onclick = () => { onIns.init(); } -
<同上>
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axCage('#demo',{
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
init: true,//加载后是否直接初始化，默认true，可选择false手动初始化
unbound: {
attr: 'unbound',//未绑定事件的元素被设置的属性，默认unbound
selector: '',//未绑定事件元素，通常为.className或nodeName等节点选择器，也可以是一个节点或节点数组，未绑定事件元素不可拖拽滚动，可复制文本
},
dampingRatio: 0.5,//拖拽出空白区域时的阻尼系数，直观表现为拖拽比较迟滞
duration: 300,//执行动画基础时间，单位ms
drift: {
enable: false,//是否启用漂移功能，默认false不启用，可使用true启用该功能
timeTHR: 200,//产生甩动漂移的时间阈值，小于该值会有漂移效果（与drift.distTHR配合），单位ms
distTHR: 20,//产生甩动漂移的抖动阈值，小于该值则不漂移（与drift.timeTHR配合），单位px，避免垂直（相对）方向滑动也漂移
coef: 2,//漂移系数，值越大滚动距离越远，默认为2，请填一个正整数
},
scale: {
enable: false,//是否启用滚轮或双指放大
min: 1,//最小倍数，默认1即保持原样，请填写小于max的正整数
max: 5,//最大倍数，默认5，请填写大于min的正整数
},
completedTHR: 20,//拖出空白多长表示完成以便于执行回调，单位px
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
onInit: '',//回调函数，加载完毕执行，无参数
onCompleted: '',//回调函数，拖出空白长度大于等于completedTHR时执行，支持一个参数direction，即拖拽方向，为left、right、top和bottom
onStart: '',//回调函数，手指/鼠标按下执行，支持一个参数即当前子对象
onMove: '',//回调函数，手指/鼠标拖动过程执行，支持一个参数即当前子对象
onEnd: '',//回调函数，松开手指/鼠标后执行，支持一个参数即当前子对象
onScaled: '',//回调函数，内容器发生scale缩放时执行，支持两个参数：缩放对象和原缩放值
onScaledMin: '',//回调函数，缩放到最小时执行，支持两个参数：缩放对象和缩放值
onScaledMax: '',//回调函数，缩放到最大时执行，支持两个参数：缩放对象和缩放值
onTranslated: '',//回调函数，内容器发生translate偏移时执行，支持两个参数：移动对象和原移动值
onRefactored: '',//回调函数，内容器发生节点变化（删除或添加子元素）时执行，无参数
onResized: '',//回调函数，外容器尺寸变化后执行，支持两个参数即rect值和容器节点（outer或inner）
onFitted: '',//回调函数，贴合边缘后执行，支持两一个参数即当前贴合对象（来自this.slides数组）
onSlided: '',//回调函数，完成一次滚动后执行，支持两个参数即原始值（节点）和目标translate值
onUpdated: '',//回调函数，参数更新后执行，无参数
onDestroy: '',//回调函数，销毁后执行，无参数
});
});