共计 2262 个字符,预计需要花费 6 分钟才能阅读完成。
【插件】移动端元素拖拽、缩放
etool
常量
含义
START_TOP
元素起始 top(与 START_LEFT 一起可用于元素位置复位)
START_LEFT
元素起始 left(与 START_TOP 一起可用于元素位置复位)
START_WIDTH
元素起始 width(与 START_HEIGHT 一起可用于元素大小复位)
START_HEIGHT
元素起始 height(与 START_WIDTH 一起可用于元素大小复位)
移动到指定位置
etool.moveTo($dom, top, left)
$dom[dom]
需要移动的 dom 节点
top[Number]
移动到的 top 位置
left[Number]
移动到的 left 位置
缩放到指定大小
etool.scaleTo($dom, width, height)
$dom[dom]
需要缩放的 dom 节点
width[Number]
缩放到的宽度
height[Number]
缩放到的高度
拖拽
etool.drag(obj)
obj.$dom[dom]
需要移动的 dom 节点
obj.topLimitTo[Number]
可移动范围的顶端临界点
obj.rightLimitTo[Number]
可移动范围的右端临界点
obj.bottomLimitTo[Number]
可移动范围的下端临界点
obj.leftLimitTo[Number]
可移动范围的左端临界点
obj.startCallback[Function]
‘touchstart’ 的回调
obj.moveCallback[Function]
‘touchmove’ 的回调
obj.endCallback[Function]
‘touchend’ 的回调
etool.drag({
$dom: $(‘.drag’),
topLimitTo: 0,
rightLimitTo: 150,
bottomLimitTo: 150,
leftLimitTo: 0,
startCallback: function () {
console.log(‘start’);
},
moveCallback: function () {
console.log(‘move’);
},
endCallback: function () {
console.log(‘end’);
}
});
缩放
etool.scale(obj)
$dom[dom]
$dom 需要缩放的 dom 节点
scaleTimes[Number]
可缩小的最小宽度
minWidth[Number]
可放大的最大宽度
maxWidth[Number]
手指每缩放 1px 实际元素的缩放大小;默认为 1
obj.startCallback[Function]
‘touchstart’ 的回调
obj.moveCallback[Function]
‘touchmove’ 的回调
obj.endCallback[Function]
‘touchend’ 的回调
etool.scale({
$dom: $(‘.scale’),
minWidth: 100,
maxWidth: 500,
scaleTimes: 1,
startCallback: function () {
console.log(‘start’);
},
startCallback: function () {
console.log(‘move’);
},
startCallback: function () {
console.log(‘end’);
}
});
向左滑动
etool.leftSlideHandler(obj)
$dom[dom]
监听的节点
success[Function]
向左滑动的回调函数
fail[Number]
非向左滑动的回调函数
etool.leftSlideHandler({
$dom: $(‘body’),
success: function () {
console.log(‘left slide’);
},
fail: function () {
console.log(‘left fail’);
}
});
向右滑动
etool.rightSlideHandler(obj)
$dom[dom]
监听的节点
success[Function]
向右滑动的回调函数
fail[Number]
非向右滑动的回调函数
etool.rightSlideHandler({
$dom: $(‘body’),
success: function () {
console.log(‘right slide’);
},
fail: function () {
console.log(‘right fail’);
}
});
向上滑动
etool.upSlideHandler(obj)
$dom[dom]
监听的节点
success[Function]
向上滑动的回调函数
fail[Number]
非向上滑动的回调函数
etool.upSlideHandler({
$dom: $(‘body’),
success: function () {
console.log(‘up slide’);
},
fail: function () {
console.log(‘up fail’);
}
});
向下滑动
etool.downSlideHandler(obj)
$dom[dom]
监听的节点
success[Function]
向上滑动的回调函数
fail[Number]
非向上滑动的回调函数
etool.downSlideHandler({
$dom: $(‘body’),
success: function () {
console.log(‘down slide’);
},
fail: function () {
console.log(‘down fail’);
}
});