用于触摸设备的拆分窗格 jquery 插件答案

【问题标题】：split pane jquery plugin for touch devices用于触摸设备的拆分窗格 jquery 插件
【发布时间】：2015-05-16 13:35:37
【问题描述】：

我正在使用 split-pane.js Jquery 插件在具有可拖动宽度的网站中实现垂直分屏视图。 Plugin and Demo

我唯一的问题是：它不适用于触控设备。

有没有办法添加这个功能？我已经尝试过 Jquery UI 触摸打孔插件。

下面是触发分屏功能的代码：

$(function() {
var min = 300;
var max = 1200;
var mainmin = 490;

$('#split-bar').mousedown(function (e) {
    e.preventDefault();
    $(document).mousemove(function (e) {
        e.preventDefault();
        var x = e.pageX - $('#sidebar').offset().left;
        if (x > min && x < max && e.pageX < ($(window).width() - mainmin)) {  
          $('#sidebar').css("width", x);
          $('#main').css("margin-left", x);
        }
    })
});
$(document).mouseup(function (e) {
    $(document).unbind('mousemove');
});

});

【问题讨论】：

标签： jquery jquery-ui jquery-plugins touch splitpane

【解决方案1】：

解决了！这条线：var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; 与众不同。

但现在我必须使用 Modernizer 检测设备并为桌面设备和触摸设备运行两个不同的脚本。

我认为这不是最佳做法。我怎样才能减少这个解决方案？

现在的代码如下所示：

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) { /*Splitscreen for Touchdevices*/
    $(function() {
        var min = 300;
        var max = 1200;
        var mainmin = 300;

        $('#split-bar').on( "touchstart", function(e){
            e.preventDefault();
            $(document).on( "touchmove", function(e){
                e.preventDefault();
                var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
                var x = touch.pageX - $('#sidebar').offset().left;
                if (x > min && x < max && touch.pageX < ($(window).width() - mainmin)) {  
                  $('#sidebar').css("width", x);
                  $('#main').css("margin-left", x);
                }
            })
        });
        $(document).on( "touchend", function(e){
            $(document).unbind("touchmove");
        });         
    });
} else {
    $(function() { /*Splitscreen for Desktop*/
    var min = 300;
    var max = 1200;
    var mainmin = 490;

    $('#split-bar').on( "mousedown touchstart", function(e){
        e.preventDefault();
        $(document).on( "mousemove touchmove", function(e){
            e.preventDefault();
            var x = e.pageX - $('#sidebar').offset().left;
            if (x > min && x < max && e.pageX < ($(window).width() - mainmin)) {  
              $('#sidebar').css("width", x);
              $('#main').css("margin-left", x);
            }
        })
    });
    $(document).on( "mouseup touchend", function(e){
        $(document).unbind("mousemove touchmove");
    });         
});

}

【讨论】：