3

ユーザーが月のグリッドを見て、オブジェクトのリストのドキュメントが存在するかどうかを選択する必要がある Web アプリケーションに取り組んでいます。

ユーザー エクスペリエンスのために、グリッドを簡単に "ペイント" できるようにしたいと考えています。たとえば、ドキュメントが 1 年間存在することをユーザーが知っている場合、その行を指でドラッグするだけで、その行のすべて<td>の行にクラスが適用されます。

Chrome 開発ツールからわかることから、touchmoveリスナーを eachにアタッチすると、多くのイベントが発生する可能性があります<td>が、イベントのターゲットは常に、タッチ イベントが開始された要素であり、他の要素ではありません。

<td>ユーザーがテーブル上で指をドラッグしたときにそれぞれが応答するようにする方法はありますか?

4

1 に答える 1

1

残念ながら、イベント ターゲットはイベントに設定されているtouchstartため、画面上で指をドラッグすると、同じイベント ターゲットが各touchmoveイベントの発生元として使用されます。

これを回避する唯一の方法は、touchmoveイベントを使用してタッチの位置を取得し、一致するテーブル セルを特定することです。すべてのテーブル セルが特定のテーブル内で同じ寸法である場合、touchmoveイベントから取得した位置をテーブルの幅と高さで割ると答えが得られます。開始するための簡単なスニペットを次に示します (この例では、テーブルの位置がビューポートの左上にあると想定しています)。

var _columnWidth = 40;
var _rowHeight = 20;
var touchListener = function (e) {
    var touch = e.touches[0];
    var x = touch.pageX;
    var y = touch.pageY;
    var xIndex = Math.floor(_someTable.width / x / _columnWidth);
    var yIndex  = Math.floor(_someTable.height / y / _rowHeight);
};

_someTable.addEventListener('touchmove', touchListener, false);

したがって、表の幅が 80 で高さが 100 で、x 座標と y 座標がそれぞれ 42 と 67 の場合、xIndex は 1 を生成し、yIndex は 3 を生成します (つまり、左から 2 番目のセルとゼロベースのインデックスを使用して上から 4 番目のセル)。

これは簡単な例であり、魔法のように問題を解決するわけではありませんが、始めるには良い場所です。お役に立てれば！

于 2013-06-10T21:15:21.447 に答える