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

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

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');
}
});