jQuery Draggable-如何使以像素為單位的拖動元素捕捉

Question

對於我的應用程序，將元素拖動並捕捉到可放置區域后，我需要繼續允許該拖動的項目僅垂直移動。 我已經進行了此操作，但是我還需要將該項目僅拖動並捕捉到像素增量。 如何才能做到這一點？

例如，我有一個時間軸，我需要將元素固定為15分鍾的增量。 我需要知道是否可以通過拖動功能實現此功能，還是需要提出一些滑塊混合功能？ 如果可能的話，我寧願不使用某種混合方法。

代碼段：

$(".activity_link").draggable({
                "snap": ".trek_slider",
                "snapMode": "inner",
                // "snapTolerance" : 30,
                "revert": function (event, ui) {
                    // on older version of jQuery use "draggable"
                    // $(this).data("draggable")
                    // on 2.x versions of jQuery use "ui-draggable"
                    // $(this).data("ui-draggable")
                    $(this).data("uiDraggable").originalPosition = {
                        top: 0,
                        left: 0
                    };

                    $(this).draggable("option", "axis", false);

                    // return boolean
                    return !event;
                    // that evaluate like this:
                    // return event !== false ? false : true;
                }
            });

            $(".trek_slider").droppable({
                "tolerance": "touch",
                "over": function (event,
                    ui) {
                    var left_position = parseInt($(ui.draggable).css("left"));

                    $(ui.draggable).find(".activity_caret").show();

                    $(ui.draggable).draggable("option", "axis", "y");
                }
            });

Answer 1

嘗試這個

$( ".your_div" ).draggable({ grid: [ 1,1 ] });

在上面的示例中，每個方向僅將x拖動一個像素

請注意：不要忘記添加其他選項。