使用jQuery可拖动API来横向滚动或向下拖动

Question

下图说明了我遇到的jQuery的Draggable方法问题。我有一个产品清单。当用户向左或向右滑动时，产品应相应滚动。当用户向下滑动时，他们应该能够向下拖动项目。 问题在于：虽然我可以成功区分垂直滑动和水平滑动，但我无法在正确的时间启用和禁用jQuery拖动功能。

这是我的代码：

            var touchPos = {
                x: null, 
                y: null,
                threshold: {
                    x: 20, 
                    y: 20
                }
            };

            // Shortcut for getting finger position from touch event
            // This is working correctly 
            var getClient = function (ev, axis) {
                var touches = ev.touches || ev.originalEvent.touches; 
                return touches[0]['client' + axis];
            };

            // All of the products are draggable by default 
            $el.draggable({
                containment: '.pageWrapper',
                cursor: 'move',
                revert: 'invalid',
                helper: 'clone',
                disabled: false 
            });

            function disableDragging () {
                $el.draggable('option', 'cancel', '.planSquare'); 
                $el.draggable("option", "disabled", true );
            }

            function enableDragging () {
                $el.draggable('option', 'cancel', '.pageWrapper'); 
                $el.draggable("option", "disabled", false);
            }

            // When the user starts moving a product
            element.bind('touchstart', function (event) {
                // Capture finger position 
                touchPos.x = getClient(event, 'X'); 
                touchPos.y = getClient(event, 'Y'); 

                if ($el.hasClass('unselectable')) {
                    return false; 
                }

                $el.css('border-color', 'transparent');
            });

            element.bind('touchmove', function(event) { 
                // Update the position of the user's finger
                var newY = getClient(event, 'Y'); 
                var newX = getClient(event, 'X'); 

                var draggingDown = newY - touchPos.y >= touchPos.threshold.y; 
                var draggingSideways = Math.abs(newX - touchPos.x) >= touchPos.threshold.x; 

                if (!draggingDown && draggingSideways) {
                    disableDragging(); 
                }
            });

            // When the user stops moving a square
            element.bind('touchend', function () {
                touchPos.x = null; 
                touchPos.y = null;
                enableDragging(); 

                $el.css('border-color', '#ccc')
            });

当我在触摸事件的上下文之外调用它们时，enableDragging和disableDragging会产生预期的效果。我的假设是，使用jQuery UI，一旦拖动事件已经开始，我就无法禁用拖动。回顾一下，如果用户没有向下拖动，我的目标是禁用拖动并切换到本机水平滚动。

有人可以推荐一种在拖动和本机滚动行为之间切换的好方法吗？