[英]Jquery Draggable - How do I make a dragged element snap in pixel increments
对于我的应用程序,将元素拖动并捕捉到可放置区域后,我需要继续允许该拖动的项目仅垂直移动。 我已经进行了此操作,但是我还需要将该项目仅拖动并捕捉到像素增量。 如何才能做到这一点?
例如,我有一个时间轴,我需要将元素固定为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 ] });
在上面的示例中,每个方向仅将x拖动一个像素
请注意:不要忘记添加其他选项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.