在触摸设备上使用拖放功能启用滚动 [英] Enable scrolling with drag-n-drop on touch devices
问题描述
重新排列列和点击现在正在触摸设备上工作。现在面临滚动的问题。我试图用 iScroll 插件解决它，但它没有工作。我从设备模式的 chrome 浏览器中截取的屏幕截图。
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-overflow-scrolling：touch;
Update: -webkit-overflow-scrolling: touch; is not working.
更新2：
尝试使用以下代码：
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：
下面是启用拖动表格列和点击事件的代码：
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:
-
您希望能够在触控设备上水平滚动表格。
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屋！
