Jquery Draggable - 如何使拖动的元素以像素增量对齐

Jquery Draggable - How do I make a dragged element snap in pixel increments

本文关键字:像素 对齐 元素 Draggable 何使 拖动 Jquery      更新时间:2023-09-26

对于我的应用程序,在将元素拖动并捕捉到可放置区域后,我需要继续允许该拖动的项目仅垂直移动。 我已经这样做了,但我还需要仅拖动该项目并将其捕捉为像素增量。 如何做到这一点?

例如,我有一个时间线,我需要元素捕捉到 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");
                }
            });

试试这个

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

在上面的例子中,它在每个方向上只被拖动一个像素

请注意:不要忘记添加其他选项。