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

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

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

前端phaser公众号