jquery плагин для сплит панели для сенсорных устройств

Question

Я использую плагин Jquery для split-pane.js для вертикального разделения экрана на веб-сайте с перетаскиваемой шириной. Плагин и Демо

Единственная проблема, которую я имею: это не работает на сенсорных устройствах.

Есть ли способ добавить эту функциональность? Я уже пробовал плагин сенсорного удара JQery 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');
});

});

Answer 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");
    });         
});

}