可拖动且响应迅速的侧边栏答案

【问题标题】：dragable and responsive sidebar可拖动且响应迅速的侧边栏
【发布时间】：2021-07-07 10:21:27
【问题描述】：

我正在寻找响应式、可拖动（可水平调整大小）侧边栏的模板。基于bootstrap的可选（我用bootstrap 4.6，其他版本也可以），可以使用jQuery。

这例如适合我的需求： https://bootsnipp.com/snippets/BDWlD

但它不是可拖动的！我尝试为可拖动的 div 使用一些代码，但由于使用了负边距，并且在上面的模板（以及大多数其他响应式侧边栏模板）中使用了更多的侧边栏，它们不起作用（大多数都使用负边距来支持css 动画）。

一个没用的例子：https://jsfiddle.net/RainStudios/mw786v1w/，但我会尝试更多

var element = document.getElementById('element');
var resizer = document.createElement('div');
resizer.className = 'resizer';
resizer.style.width = '10px';
resizer.style.height = '10px';
resizer.style.background = 'red';
resizer.style.position = 'absolute';
resizer.style.right = 0;
resizer.style.bottom = 0;
resizer.style.cursor = 'se-resize';
element.appendChild(resizer);
resizer.addEventListener('mousedown', initResize, false);

function initResize(e) {
   window.addEventListener('mousemove', Resize, false);
   window.addEventListener('mouseup', stopResize, false);
}
function Resize(e) {
   element.style.width = (e.clientX - element.offsetLeft) + 'px';
   element.style.height = (e.clientY - element.offsetTop) + 'px';
}
function stopResize(e) {
    window.removeEventListener('mousemove', Resize, false);
    window.removeEventListener('mouseup', stopResize, false);
}

因此，我从两者或其他模板中寻找可拖动的响应式侧边栏的连接代码。（如果可能没有大的库，因为我仍然需要进一步开发代码。）我google了很多，但没有找到很好的解决方案。

更详细的问题描述：侧边栏的宽度（例如 250px）和具有相同值的负边距（-250px）设置在一个类中（在上面的链接示例中#sidebar-wrapper）。在第二个类中，内边距设置为 250 像素。如果第二类处于活动状态，则显示侧边栏，否则隐藏。动态修改它是棘手的。要动态调整它，我必须动态调整所有三个类，这是可能的，但非常麻烦和丑陋。或者，我必须在没有类（直接赋值）的 JS 中编写全新的侧边栏处理，包括。响应式变体（来自媒体查询）。也不好看。有没有办法动态计算css中的值？？

有什么想法吗？一些链接就足够了，我做剩下的。或者处理 CSS 的想法（不能是完整的代码）

（最后应该会出现在侧边栏中带有目录的帮助页面，通过 ajax 进行即时搜索的搜索以及通过主 div 中的 ajax 加载帮助内容。但我不是担心这部分，我以前做过类似的东西 - 但如果我找到现成的东西，我不会说不;-)）

【问题讨论】：

标签： javascript jquery bootstrap-4

【解决方案1】：

最后我自己管理：

以上改动：

var wrapperElement = document.getElementById('wrapper');
...
function Resize(e) {
   element.style.width = (e.clientX - element.offsetLeft) + 'px';
   wrapperElement.style.paddingLeft = (e.clientX - element.offsetLeft) + 'px'; /new
}

侧边栏示例对脚本的更改：

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
  
  element.style.width = ""; //new
  wrapperElement.style.paddingLeft = ""; // new
});

完整代码：https://codepen.io/MichaelBootstrap/pen/BapJzYz

这很好用。缺点：

淡入淡出后，侧边栏又恢复了原来的宽度。
侧边栏变小还是有问题
拖动不是很流畅

如果有人有更好的解决方案，那我会很高兴。

【讨论】：