我正在尝试创建与 Material.io 底部工作表可用的类似功能,但使用 jQuery。
我发现为 React 编写的类似内容有一个很好的图像可以解释。 React 可滑动底板
我从一些 jQuery“触摸”模块开始,但发现@roko-c-buljan使用纯 jQuery 有一个很好的起始方法(如何创建可拖动的菜单 div(桌面和移动设备))。
我尝试使用该示例作为从底部而不是顶部开始工作的起点,同时也让它优雅地对齐 - 就像在 React 图像中一样,但在两个不同的级别:距离底部 200px,并且也在底部对齐顶部 - 使用相同的过渡效果继续移动到相同方向的下一个捕捉点。
我基本上正在寻找使用具有触摸功能的 jQuery 的 Material.io 底部工作表设计。
在遇到许多障碍之后,我目前正处于代码中,并希望这比我想象的要接近得多。
请注意,此代码仅在浏览器中使用触摸模式时运行
$(document).ready(function () {
var $MB = $('#menu_btn'),
$M = $('#menu'),
bheight = $(".container-fluid").height(),
startBottom,
startAtY = 10,
endAtY = bheight-10,
clickedAtY,
clickEventType = document.ontouchstart !== null ? 'mousedown' : 'touchstart',
moveEventType = document.ontouchmove !== null ? 'mousemove' : 'touchmove' ,
endEventType = document.ontouchend …Run Code Online (Sandbox Code Playgroud)