javascript - 如何在一个 jQuery 移动页面中的多个 DIV 之间滑动？

Question

如何在一个 jQuery 移动页面中的多个 DIV 之间滑动？

   <div data-role="page">
      <div data-role="content">
         <div> Content1 </div>
         <div> Content1 </div>
         <div> Content1 </div>
      </div>
    </div>

我在 jQuery mobile 中使用swipeleft和swiperight事件，但它仅适用于页面(data-role="page")

谁能说如何实现 DIV 元素？

Answer 1

我写了一些用于爆炸滑动的代码，它可能对你有帮助

$(function () {
var ftch, // first touch cache
lck = Math.sin(Math.PI / 4); //lock value, sine of 45 deg configurable

var defSwipeDir = function (el, tchs) { // need define swaping direction, for better UX
    if (typeof (tchs) !== 'object') return 0; // check if there was any movements since   first touch, if no return 0
    var ltch = tchs[tchs.length - 1], // last touch object
        dx = ltch.pageX - ftch.pageX,
        dy = ltch.pageY - ftch.pageY,
        hyp = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)),
        sin = dy / hyp,
        cos = dx / hyp,
        dir;

    if (Math.abs(cos) >= lck) { // left or right swape
        dir = cos > 0 ? 'r' : 'l';
    } else { // up or down
        dir = sin < 0 ? 'u' : 'd';
    }
    el.trigger('swipe', dir); // trigger custom swipe event
    return dir; // and return direction too
}

$('.myelementTouchDetection').on('touchstart touchmove swipe', function (ev, d) {
    var oev = ev.originalEvent,
        myelementTouchDetection = $(this),
        dir; // you may know swipes on move event too

    switch (ev.type) {
        case 'touchstart':
            ftch = oev;
            break;
        case 'touchmove':
            dir = defSwipeDir(myelementTouchDetection, oev.touches);
            return false // cancel default behaiviour
            break;
        case 'swipe':
            switch (d) {
                case 'r': // swipe right
                    console.log('swipe right');
                    break;
                case 'l': // swipe left
                    console.log('swipe left');
                    break;
                case 'u': // swipe up
                    console.log('swipe up');
                    break;
                case 'd': // swipe down
                    console.log('swipe down');
                    break;
            }
            break;
    }
})
});