0

私は現在、IE7 以上と互換性がなければならないクライアント用に、かなり野心的なインタラクティブ ウォールを構築しています。

これは基本的に、Raphael.js を使用して描画された、ドラッグ可能な大きな六角形のグリッドです。グリッドのサイズは画面サイズに依存しますが、ほとんどの場合、2500 個の SVG 要素を超えることはありません。

含まれている DIV を IE9 を含む最新のブラウザーでドラッグすると、非常にスムーズです。IE7 と IE8 では、これは当てはまりません!

古いブラウザーをサポートする必要があるということは、CSS3 がサポートされていないことを意味し、したがって CSS Transform もサポートされていません。その結果、CSS の left プロパティと top プロパティを更新して要素を配置する必要があります。

これらの古いブラウザで大きな要素を移動するより効率的な方法はありますか? ゆっくりとドラッグすると非常にスムーズですが、すばやくドラッグすると物が殺されることに気付きました。ドラッグ イベントが毎秒処理される回数を制限しようとしましたが、あまり効果がありません。

私の主なオプションは、IE7/8 でドラッグを無効にするか、メイン要素のサイズを小さくすることです。どちらも理想的ではありませんが、これまでのところ、これらが唯一の選択肢です。

私はそれがロングショットだと思いますが、どんな提案でも素晴らしいでしょう！

4

2 に答える 2

1

ここで自分の質問に答えると、他の誰かが同様の問題を抱えている場合、これに出くわす可能性があり、役立つと思います...

ドラッグ機能 (movemove イベント) に、stopPropagation または preventDefault() 呼び出しを含めていませんでした。これらを追加すると、パフォーマンスが劇的に向上しました!

于 2012-04-19T11:08:08.547 に答える
1

実行を調整するのはどうですか？これは、実際には、マウスの移動を停止したときにのみdivが配置され、マウスカーソルと一緒に移動しないことを意味します...

だから次のようなことをする

var timeout;
$("#element").mouseover(function() {
  if ([ie_lte_9]) {
    clearTimeout(timeout);
    timeout = setTimeout(doDrag, 10);
  } else {
    doDrag();
  }
});

ソースの mouseover は、コード内の別のイベント タイプである可能性があり、doDrag は別の方法で呼び出されます... "[ie_lte_9]" は、Internet Explorer < 9 の検出が必要であることを意味します。

于 2012-04-19T09:50:29.850 に答える