1

あなたの中にjQueryの達人に質問があります。

シナリオ

私は、（とりわけ）ユーザーが大きなテーブル内でカードを並べ替えることができるWebアプリを構築しています。このテーブルの機能の1つは、テーブルの上部に固定されているが、同時に行に「固定」されているビンです。これにより、ユーザーは、行ではなく列に関連付けられたビンにカードを配置できます。

これは、私が何を意味するかを示すために、（作成するのが面倒だった）jsFiddleの例を簡略化したものです。

問題

問題は、テーブル内の道を下にスクロールしてから、カードをテーブルからビンにドラッグしようとすると、通常は機能しないことです。代わりに、カードは、ユーザーが見ることができないビンの「後ろ」のテーブルセルに配置されます。それが理にかなっていることを願っています。

質問と攻撃の計画

この問題を解決する最善の方法は、ユーザーがビンの上にマウスを置くとすぐに、ビンを除くテーブル内のすべてのセルのドロップを無効にすることだと思います。そうすれば、カードはビンの後ろのテーブルセルではなく、ビンに確実に着地します。

同意しますか？問題を解決するためのより良い方法はありますか？

ノート

あなたは私の実装を見て、なぜ私が今のように物事を実装しているのか不思議に思うかもしれません。（ビン、一番上の行、左の列にdivの代わりにテーブルセルを使用している理由など。）残念ながら、私が行った実装を選択した理由を完全に説明することはできませんが、この例では示されていない制約の数。だから...私はレイアウトを改善する方法についてアドバイスを受け付けていますが、この質問に「では、代わりにこのように設定してみませんか？」と答えないでください。問題に対処するために、オッズはあなたの提案されたセットアップが何らかの理由で私のために機能しないためです。

何か明確にする必要がある場合はお知らせください。答えてくれた人に感謝します！

4

1 に答える 1

1

これは（フィドル）：

$('#binRow').mouseenter(function() {
    $('tr:not("#binRow") td.card-holder')
        .removeClass('card-holder')
        .addClass('disabled-card-holder');
}).mouseleave(function() {
    $('.disabled-card-holder')
        .removeClass('disabled-card-holder')
        .addClass('card-holder');
});​
于 2012-07-25T19:41:36.623 に答える