启用与在触摸设备上拖动正滚动下降 [英] Enable scrolling with drag-n-drop on touch devices

问题描述

重新安排列，然后单击现在工作在触摸设备。现在面临着滚动的问题。我试着用 iScroll 插件来解决它，但它没有工作。截屏，我从铬浏览器的设备模式了。

Re-arranging columns and click is now working on touch devices. Now facing the issue with scrolling. I tried to resolve it with iScroll plugin but it didn't work. The screenshot I took from device mode of chrome browser.

表列可在即时加入等列数可以变化。

Table columns can be added on-the-fly and so number of columns may vary.

是否有任何 CSS 办法正常工作？滚动如果没有我怎样实现它的JavaScript 或的jQuery ???

Is there any css way to work scrolling properly ??? If not how do I implement it with javascript or jquery ???

更新：
-webkit-溢出滚动：触摸;不工作。

Update: -webkit-overflow-scrolling: touch; is not working.

更新2：
低于code尝试：

Update 2: Tried with below code:

if (Modernizr.touch) {
            $('.container-fluid').css('overflow', 'auto');            
        }

而这其中还有：

 if (Modernizr.touch) {            
              //iScroll plugin                
              var myScroll = new IScroll('#tblGrid', {               
                    scrollbars: true
                });
            }

他们没有工作。

更新3：

下面是code，使表列的拖拽和点击事件：

Below is the code to enable dragging of table columns and click event:

var clickms = 200;
    var lastTouchDown = -1;

    function touchHandler(event) {
        var touch = event.changedTouches[0];

        var d = new Date(); var type = "";
        switch (event.type) {
            case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
            case "touchmove": type = "mousemove"; lastTouchDown = -1; break;
            case "touchend": if (lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms) { lastTouchDown = -1; type = "click"; break; } type = "mouseup"; break;
            default: return;
        }

        var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent(type, true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

        touch.target.dispatchEvent(simulatedEvent);
        event.preventDefault();
    }

function init() {
        document.addEventListener("touchstart", touchHandler, true);
        document.addEventListener("touchmove", touchHandler, true);
        document.addEventListener("touchend", touchHandler, true);
        document.addEventListener("touchcancel", touchHandler, true);
    }
$(document).ready(function () { 

init();

        var myScroll;
        function loaded() {
            myScroll = new IScroll('#tblGrid', {
                mouseWheel: true,
                scrollbars: true,
                click: true,
                eventPassthrough: true,
                tap: true
            });
        }
        if (Modernizr.touch) {            
            loaded();
        }

});

更新4：

我试图用 iScroll 4 和滚动现在的作品。但是，当我重​​新整理/拖放列，滚动也适用，并在这种情况下拖放不会因为 touchmove 事件。

I tried to use iScroll 4 and scrolling now works. But when I rearrange/drag-drop columns, the scrolling also works and in that case Drag-drop does not work properly due to touchmove event.

和 jquery.floatThead 也停止工作，修正了头。

And jquery.floatThead also stopped working which fixes the headers.

推荐答案

我不完全确定你的最终目标是什么，但让我看看我的理解：

I'm not entirely sure what your end goal is, but let me see if I understand:

1. 您希望能够水平滚动触摸设备上的表。这个工作现在。

1. You want to be able to scroll your table horizontally on touch devices. This works right now.

您希望能够拖放列以重新排列它们。你想通过拖动列标题来做到这一点。现在，当你这样做的 touchmove 监听器造成整个表，水平滚动，当您拖动一列，这是一个问题。

You want to be able to drag and drop your columns to rearrange them. You want to do this by dragging the column headers. Right now, when you do this the touchmove listener is causing the whole table to scroll horizontally when you drag a column, which is a problem.

如果我在上面的两点正确的，那么我想的可能的解决您的问题是要改变的init（）使它增加了触摸听众只有你的表头（而不是整个文件）。事情是这样的：

If I'm correct on the two points above, then I think what might fix your problem is to change init() so that it adds the touch listeners only to your table headers (instead of the entire document). Something like this:

function init() {
    $( "th" ).each(function( index ) {
        this.addEventListener("touchstart", touchHandler, true);
        this.addEventListener("touchmove", touchHandler, true);
        this.addEventListener("touchend", touchHandler, true);
        this.addEventListener("touchcancel", touchHandler, true);
    });
}

您还需要四个事件侦听器适用于添加到表的任何新的列标题（无论你目前正在处理您添加列逻辑）。

You would also need to apply the four event listeners to any new column headers added to the table (wherever you're currently handling you 'add column' logic).

我不能肯定这将100％的工作 - 如果你可以张贴问题的摄制如某处的http：//的jsfiddle .NET / ，可能更容易帮你调试。

I'm not certain this will 100% work - if you could post a repro of the problem somewhere like http://jsfiddle.net/, it might be easier to help you debug it.

这篇关于启用与在触摸设备上拖动正滚动下降的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！