我想打开一个超越身体滚动的模态层.为了实现这一点,当显示图层时,我将身体溢出设置为隐藏,并将溢出设置为在模态图层上滚动.在视觉上,一个滚动条取代另一个.
在后台我有一个固定位置和100%宽的顶部栏.当身体溢出被设置为隐藏时,100%宽度div(顶部栏)占据滚动条空间并且其元素向右移动.
如何防止这些元素移动？
我试图计算(javascript)滚动条的宽度,并在设置主体溢出时:隐藏,给右边距:"滚动条宽度"到顶部栏.那没用.
还尝试在顶栏的右端设置一个虚拟div,其中溢出设置为滚动并强制它在打开图层时显示滚动条.我们的想法是用另一个滚动条占用丢失滚动条的空间,仅在顶部容器上.这几乎起作用但创造了1或2px闪烁.还不够好.
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal'),
close_modal = $('.close-modal'),
modal_container = $('.modal-container'),
toggleModal = function() {
body.toggleClass('body-locked');
modal_container.toggleClass('dp-block');
};
open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);
我正在尝试开发一种控件，其中必须能够添加元素、移动元素并调整它们的大小。这个想法是通过将一些元素拖动到仪表板来绘制小图表。这是我想要实现的目标：
仪表板必须有固定的边界（左/右/下/上）。元素应该与它们碰撞而不是超越。
可以使用按钮添加元素或从存储库中拖动元素
元素必须可调整大小
元素应该碰撞
元素必须是可移动的 - 自由式，而不是像 gridster 或 gridstack 那样在顶部进行调整。我需要能够将一个元素放在仪表板的底部或中间，并留有空白空间。
我必须能够从元素中获取所有必要的数据，以便存储和重新创建仪表板（保存和加载）。
我首先使用拖放功能创建这个小型测试项目，但很快就感觉我正在尝试重新发明轮子，并且可能以一种不必要的老式方式来做。
但经过几次搜索后，我仍然没有找到一个插件/控件能够按照我需要的方式运行或者足够容易让我更改。
Gridster 和 gridstack 使元素位于顶部。TinyDraggable 看起来不错，但不能调整大小。我确实尝试使 div 元素 .ressized() （添加 jQueryUI），但我无法使其工作。这个插件没有（我认为）冲突，如果我设法获得所需的其他一切，那就没问题了。与我的小项目相比，我确实喜欢可拖动项目的自由移动，它们从一个插槽移动到另一个插槽。
所以，问题是：你知道是否有适合我的插件（jQuery）？准备好使用还是易于配置/更改？
非常感谢