4

私は、ドラッグ アンド ドロップで並べ替え可能なリストを作成するのがクールなプロジェクトに取り組んでいます。HTML 5 のドラッグ アンド ドロップを使用して、それほど手間をかけずにこれを機能させました。私の問題は、リストが長くなる可能性があるため、事実上ページ化されているか、「スクロール時にロード」されているか、またはあなたがそれを呼びたいものです。これは、スクロール イベントに反応し、AJAX を介してより多くのデータをロードすることによって機能します。

したがって、リストには「バンプスクロール」機能があります。ビューポートの上部と下部に通常は見えない2つのdivを配置することでこれを実装しました。ドラッグオーバー イベントを受け取ると、ビューポートのスクロール トップを増減するだけです。ものすごく単純。フィドルでは、それらを見ることができるように背景を与えました。FF または Chrome でフィドルを試すと、ajax 呼び出しが UI の更新を完了するとわかります。これは IE では発生しません。

dojo.byId("bumpScrollDown").connect("dragover", function(bump) {
    wrapper.scrollTop -=  20;
    dojo.xhrGet({url: "/echo/json/"}).then(function() {
        // THIS WILL NEVER FIRE on IE 9 UNTIL THE DRAG
        // OPERATION IS COMPLETED
        dojo.byId("log").innerHTML += "callback... ";
    }); 
});

問題は、IE 9 でのドラッグがイベント ループを詰まらせているように見えるため、何も起こらないことです。ドラッグが行われている限り、ajax コールバック、タイムアウトなどは発生しません。これは、ドラッグオーバーで始まるアニメーションなど、多くのことを台無しにするようです.

これを機能させる方法を知っている人はいますか？ドラッグ イベントをキャンセルして、最初からやり直すことはできますか? dragDrop() を呼び出すと、何らかの方法でキャンセルして ajax コールバックを起動できる場合、ドラッグが再び開始されます。

フィドルで、ドラッグ イベントによってトリガーされた AJAX 呼び出しのいずれも、ドラッグが終了するまでコールバックが呼び出されないことがわかります。これはクロムまたは FF では発生しません。

http://jsfiddle.net/stevendwood/5VWZk/4/

更新: IE10 でより適切に動作します

4

1 に答える 1

0

テストするIE9はありませんが...

また、ここでは完全に間違っているかもしれませんが、このコード内のstopEventビットに関連しているかどうかをテストしましたか?

dojo.connect(wrapper, "dragover", function(ev) {
    if (!dojo.hasClass(ev.target, "noDroppy")) {
        dojo.addClass(ev.target, "dragover");
        //dojo.stopEvent(ev);
    }
});

それ以外は：

最近、jQuery で同様のコードを書きました。

私の解決策は、バンプ上の別のホバーイベントではなく、ドラッグイベント自体の中でドラッグがバンプ上にホバリングしているかどうかを確認することでした。

スクロール速度を調整するために、ドラッグがバンプ上でどれだけ下または上に引っ張られているかを確認することもできます.

お役に立てれば。

于 2013-06-10T09:40:50.017 に答える