6

jQueryで「2dスライダー」を作成しました。このスライダーでは、バウンディングボックス内の「ハンドル」をドラッグして2つのパラメーターを同時に操作します。

親div内に「handle」divをネストし、jQueryUIプラグインを使用してドラッグ動作を容易にすることでこれを実装しました。htmlは次のようになります。

<div class="Slider2d" id="grid_spacing_both">
    <div class="Slider2dHandle" id="grid_spacing_both_handle"></div>
</div>

jQueryは次のようになります。

$(".Slider2dHandle").draggable({
    containment: "parent",
    scroll: false,
    drag: function(event, ui) {
        // calculates position and updates value input boxes
    }
});

また、親div内のクリックの場所にハンドルを再配置するコードをいくつか作成しました。

$(".Slider2d").mousedown(function(event){
    // get location of click and reposition handle to click location
});

上記のメソッドを変更して、ユーザーが親divのどこかをクリックし、ハンドルをクリック位置に再配置してから、マウスボタンを離さずにハンドルのドラッグを開始できるようにします。基本的に、ドラッグ機能をプログラムでトリガーする方法を理解する必要があります。

私はこことここでいくつかの提案を見つけ、上記の方法を次のように変更することによってそれらの推奨事項を実装しようとしました：

$(".Slider2d").mousedown(function(event){
    // get location of click and reposition handle to click location
    handle = $(".Slider2d").children(".Slider2dHandle");
    handle.trigger(event);
});

これは最も技術的な意味で機能しますが、非常に遅く、Safariから「RangeError：最大呼び出しスタックサイズを超えました」というエラーメッセージが大量に表示されます。私が考えているのは、ハンドルでイベントをトリガーすると、親にバブルが発生し、親がトリガーを再度呼び出すということです。.trigger（）呼び出しの前後にevent.stopPropagationをコードにスローすることでバブリングを止めようとしましたが、役に立ちませんでした。

ですから、これを機能させる方法について誰かが何か提案があれば、私は本当に感謝しています。ここにバックアップ計画がありますが、これは不必要に複雑に思えます。

ありがとう！

4

3 に答える 3

8

私はなんとかこれを機能させることができました。私が思ったように、それはイベント処理と関係がありました。

修正は簡単でした。イベントターゲットがコールバックがバインドされた要素（つまり、スライダーバウンディングボックス）と同じであるかどうかを確認するために、上記のコードを変更しました。ハンドルを再配置する最初のクリックでは、これらは同じ要素です。ただし、ハンドルのmousedownイベントがトリガーされ、イベントがバウンディングボックスにバブルアップすると、そのイベントのターゲットはスライダーハンドルになります。したがって、それらは一致せず、トリガーイベントが再度呼び出されることはなく、無限ループが発生します。

少なくとも私はそれが起こっていると思います。いずれにせよ、機能したコードは次のとおりです。

$(".Slider2d").mousedown(function(event){
    // get location of click and reposition handle to click location 

    handle = $(".Slider2d").children(".Slider2dHandle");
    if ($(this).attr("id") == $(event.target).attr("id")) {
        handle.trigger(event);
    }
});
于 2011-03-14T21:49:49.300 に答える
1

または、ハンドラーのmousedownイベントで伝播を停止して、スライダーのmousedownイベントにバブルアップしないようにすることもできます。

$(".Slider2d").mousedown(function(event) {
    // get location of click and reposition handle to click location 

    handle = $(".Slider2d").children(".Slider2dHandle");
    handle.trigger(event);
});

$(".Slider2dHandle").mousedown(function(event) {
    event.stopPropagation();
});
于 2013-02-26T20:30:41.080 に答える
0

これは私にはうまくいかないので、私は何か間違ったことをしていると思います。しかし、それがあなたのために働くのなら、なぜ設定しないのか疑問に思いました：

if ($(this).attr("id") == $(event.target).attr("id"))

これに：

if (this === event.target)

これがわかったら更新します。

それでも何もありません。その無限ループの間event.target、ハンドルではなくスライダーとして残り、2番目のイベントが実際にトリガーされます。

編集：了解しました。jQuery1.7.1から1.6.4に切り替えましたが、機能します。

于 2012-03-15T15:08:26.453 に答える