Show:

bui.touch Class

Defined in: src/scripts/method/bui.touch.js:9
Module: Method

Available since 1.8.0

兼容PC的拖拽事件库，支持 swipe , drag, longtap 等事件

Constructor

bui.touch

(
  • [option]
)

Defined in src/scripts/method/bui.touch.js:9

Available since 1.8.0

Parameters:

  • [option] Object optional
    • id String | Object

      拖拽的对象或者选择器, 必须

    • [children] String optional

      容器里的子选择器，默认为 ""

    • [handle] String optional

      按住容器里的某个选择器才能实现拖拽，默认为 ""

    • [stopHandle] String optional

      按住容器里的某个选择器不能实现拖拽，默认为 ""

    • [dragable] Boolean optional

      允许拖拽 默认 false | true

    • [moveType] String optional

      通过哪种方式来实现移动，默认为 "position" | "transform"

    • [direction] String optional

      移动的方向，默认为 "xy" 水平垂直 | "x" 水平 | "y" 垂直

    • [dragup] Boolean optional

      单独控制某个方向是否允许往上 默认 true | false

    • [dragdown] Boolean optional

      单独控制某个方向是否允许往下 默认 true | false

    • [dragleft] Boolean optional

      单独控制某个方向是否允许往左 默认 true | false

    • [dragright] Boolean optional

      单独控制某个方向是否允许往右 默认 true | false

    • [useScroll] Boolean optional

      内容里面有滚动条的时候，优先滚动，不允许拖拽 默认 true | false

    • [stopPropagation] Boolean optional

      阻止往上冒泡 默认 false ｜ true

    • [swipeDistance] Function optional

      滑动的距离 默认 60 ，PC的swipe事件只在容器内，超出容器就不会触发swipe事件了

    • [onLongtap] Function optional

      长按的回调

    • [longtapTime] Number optional

      默认 1.5

    • [onSwipe] Function optional

      不管哪个方向，滑动距离大于 swipeDistance 则可以触发回调

    • [onSwipeup] Function optional

      向上滑动大于滑动距离时触发回调

    • [onSwipedown] Function optional

      向下滑动大于滑动距离时触发回调

    • [onSwipeleft] Function optional

      向左滑动大于滑动距离时触发回调

    • [onSwiperight] Function optional

      向右滑动大于滑动距离时触发回调

    • [onBeforeTouchstart] Function optional

      按下前触发，返回 false 则接下来的事件都不触发

    • [onTouchstart] Function optional

      按下触发，返回 false 则接下来的事件都不触发

    • [onBeforeTouchmove] Function optional

      移动前触发，返回 false 则接下来的移动都不触发

    • [onTouchmove] Function optional

      移动触发

    • [onBeforeTouchend] Function optional

      松开鼠标前触发，返回 false 则接下来的swipe都不触发

    • [onTouchend] Function optional

      松开鼠标触发

    • [onBeforeDragstart] [ 进入touchstart前的回调] Function optional
    • [onBeforeDragmove] [ 进入touchmove前的回调] Function optional
    • [onBeforeDragend] [ 进入touchend前的回调] Function optional
    • [onDragstart] [ 开始拖动的回调] Function optional
    • [onDragmove] [ 移动中的回调] Function optional
    • [onDragend] [ 移动后的回调] Function optional

Example:

   <div id="drag" class="bui-position-bottom" style="width:100px;height:100px;background:red;"></div>
                                    
                                       
                                       var uiTouch = bui.touch({
                                           id: "#drag",
                                           dragable: true,// 拖拽有效时，底下的
                                           onLongtap: function(e){
                                               // 长按触发
                                           },
                                           onDragend: function(e){
                                               // 移动后触发
                                           }
                                       })

Methods

dragable

(
  • [dragable]
  • [onBeforeDragstart]
  • [onBeforeDragmove]
  • [onBeforeDragend]
  • [onDragstart]
  • [onDragmove]
  • [onDragend]
)

Defined in src/scripts/method/bui.touch.js:786

拖动

Parameters:

  • [dragable] Boolean optional

    是否允许拖拽，默认允许 true | false

  • [onBeforeDragstart] Function optional

    进入touchstart前的回调

  • [onBeforeDragmove] Function optional

    进入touchmove前的回调

  • [onBeforeDragend] Function optional

    进入touchend前的回调

  • [onDragstart] Function optional

    开始拖动的回调

  • [onDragmove] Function optional

    移动中的回调

  • [onDragend] Function optional

    移动后的回调

Example:

 uiTouch.dragable();

getLastXY

()

Defined in src/scripts/method/bui.touch.js:232

获取最后坐标值, 绝对定位则获取原本的坐标，一般在回调里面使用，通过 this.getxy() 使用

Example:

init

()

Defined in src/scripts/method/bui.touch.js:172

初始化

Example:

longtap

()

Defined in src/scripts/method/bui.touch.js:282

Available since 1.8.1

长按事件

Example:

uiTouch.longtap(function(e){ // 绑定长按 })

move

(
  • x
  • y
  • [animate]
  • [callback] [ 动画结束后执行]
)

Defined in src/scripts/method/bui.touch.js:900

移动

Parameters:

  • x Number

    [ 移动的横向距离 ]

  • y Number

    [ 移动的纵向距离 ]

  • [animate] Boolean optional

    是否做动画，默认 true | false

  • [callback] [ 动画结束后执行] Function optional

Example:

uiTouch.move({ x:0, y:0 };

off

(
  • type
)

Defined in src/scripts/method/bui.touch.js:1001

关闭事件

Parameters:

  • type String

    [ "click" "drag" ]

Example:

 uiTouch.off("click");

swipe

()

Defined in src/scripts/method/bui.touch.js:300

Available since 1.8.0

swipe公共事件，上下左右都会触发

Example:

uiTouch.swipe(function(e){ // 回调 })

swipedown

()

Defined in src/scripts/method/bui.touch.js:366

Available since 1.8.0

上滑事件

Example:

uiTouch.swipedown(function(e){ // 回调 })

swipeleft

()

Defined in src/scripts/method/bui.touch.js:318

Available since 1.8.0

左滑事件

Example:

uiTouch.swipeleft(function(e){ // 回调 })

swiperight

()

Defined in src/scripts/method/bui.touch.js:334

Available since 1.8.0

右滑事件

Example:

uiTouch.swiperight(function(e){ // 回调 })

swipeup

()

Defined in src/scripts/method/bui.touch.js:350

Available since 1.8.0

上滑事件

Example:

uiTouch.swipeup(function(e){ // 回调 })