1

アイテムを jquery スライダーにドラッグする機能を実装しようとしています。たとえば、アイテムがスライダーの 86% にドロップされた場合、この位置をサーバーに POST して、アイテムがサーバー上の結果セットの 86% に配置されるようにします。

jQueryスライダーへのドロップとサーバーに投稿されたパーセンテージをどのように検出しますか?

4

2 に答える 2

1

jQuery を使用しているため、ドラッグ アンド ドロップに jQuery UI を使用していると仮定します。最初にこれを読んでください：http://api.jqueryui.com/droppable/#event-drop

次に、イベントの一部として、ドロップ可能なコンテナーに対するドロップされた要素のオフセット位置を取得することに注意してください。これは、必要に応じてパーセンテージで計算できる場所です。

たとえば、幅が 100px であることがわかっているコンテナーの左 -> 90px の位置にドロップすると、90% がマジック ナンバーであることを意味します。

または、ネイティブのドラッグ アンド ドロップを使用している場合は、この簡単な編集を確認してください: http://jsbin.com/ezuke/3283/edit。ドロップ イベントでイベントのコンソール ログをポップすると、それをドロップした場所のオフセットも公開されていることがわかり、% の計算でそれを再度使用できます。

于 2013-03-08T22:13:16.400 に答える
1

私は物事を説明するのが苦手なので、jsFiddle を作成しました。これはまさにあなたが探しているものではないかもしれませんが、良い出発点になるはずです!

コードは次のとおりです。

    $(function () {

    //the draggable object
    $("#dragobject").draggable();

    //Prepare the slider
    var range = 100,
        sliderDiv = $("#slider");

    // Activate the UI slider
    sliderDiv.slider({
        min: 0,
        max: range,
        create : function(){
            $(this).find(".ui-slider-handle").hide();
        }
    });

    // Number of tick marks on slider
    var position = sliderDiv.position(),
        sliderWidth = sliderDiv.width(),
        minX = position.left,
        maxX = minX + sliderWidth,
        tickSize = sliderWidth / range;

    //Set slider as droppable
    sliderDiv.droppable({
        //on drop 
        drop: function (e, ui) {

            var finalMidPosition = $(ui.draggable).position().left + Math.round($("#dragobject").width() / 2);

            //If within the slider's width, follow it along
            if (finalMidPosition >= minX && finalMidPosition <= maxX) {

                var val = Math.round((finalMidPosition - minX) / tickSize);
                sliderDiv.slider("value", val);
                alert(val + "%");

                //do ajax update here to set the position
                /*$.ajax({
                    type: "POST",
                    url: url,
                    data: val,
                    success: function () {
                        //congrats
                    },
                    dataType: dataType
                });*/

            }
        }
    });

});

そして、ここに jsFiddle リンクがあります: jsFiddle example

それが役に立てば幸い、

マーク。

SOURCES : マウスの移動中にスライドする Jquery スライダー、 jQuery UI スライダー

于 2013-03-08T22:16:45.777 に答える