【插件】移动端元素拖拽、缩放

13次阅读

共计 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’);
}
});

正文完
 0