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

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

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

内容1
内容1
内容1

我在jQuery mobile中使用了

swipeleft

和

swiperight

事件，但它只适用于页面

（data role=“page”）

---

有谁能说一下如何实现DIV元素吗？

我写了一段代码，用于分解滑动，这可能会对您有所帮助

$(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;
    }
})
});

$（函数（）{
var ftch，//第一触摸缓存
lck=Math.sin（Math.PI/4）；//锁定值，45度正弦可配置
var defSwipeDir=函数（el，tchs）{//需要定义交换方向，以获得更好的用户体验
if（typeof（tchs）！==“object”）返回0；//检查第一次触摸后是否有任何移动，如果没有返回0
var ltch=tchs[tchs.length-1]，//最后一次触摸对象
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，
迪尔；
如果（Math.abs（cos）>=lck）{//左或右交换
dir=cos>0？'r'：'l'；
}否则{//向上或向下
dir=sin<0？'u'：'d'；
}
el.trigger（'swipe'，dir）；//触发自定义滑动事件
return dir；//也返回方向
}
$（'.myelementTouchDetection'）。打开（'touchstart touchmove swipe'，函数（ev，d）{
var oev=ev.原始事件，
myelementTouchDetection=$（此），
dir；//您可能也知道“移动时滑动”事件
开关（电动型）{
案例“touchstart”：
ftch=oev；
打破
“触摸移动”案例：
dir=defSwipeDir（myelementTouchDetection，oev.Touchs）；
返回false//取消默认行为
打破
案例“刷卡”：
开关（d）{
案例'r'：//向右滑动
console.log（“向右滑动”）；
打破
案例“l”：//向左滑动
console.log（“向左滑动”）；
打破
案例'u'：//向上滑动
console.log（'swipe up'）；
打破
案例“d”：//向下滑动
console.log（“向下滑动”）；
打破
}
打破
}
})
});