可拖動和響應式側邊欄

Question

我正在尋找響應式、可拖動（水平可調整大小）側邊欄的模板。 可選基於bootstrap（我用的是bootstrap 4.6，其他版本都可以），可以使用jQuery。

例如，這符合我的需要： https://bootsnipp.com/snippets/BDWlD

但它不是可拖動的，我嘗試使用一些代碼來實現可拖動的 div。 但它們不起作用，因為使用了負邊距和一些更多的 toogle 上面模板中的側邊欄（以及大多數其他響應式側邊欄模板）（大多數都使用負邊距來支持 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);
}

因此，我從這兩個模板或其他模板中尋找可拖動的響應式側邊欄的聯合代碼。 （如果可能的話，沒有大的庫，因為我仍然需要進一步開發代碼。）我在谷歌上搜索了很多但沒有找到很好的解決方案。

更詳細的問題描述：側邊欄的寬度（例如250px）和具有相同值的負邊距（-250px）設置在一個class中（在上面的鏈接示例中#sidebar-wrapper）。 在第二個 class 中，填充設置為 250px。 如果第二個 class 處於活動狀態，則顯示側邊欄，否則隱藏。 動態修改它很棘手。 要動態調整它，我必須動態調整所有三個類，這是可能的，但非常麻煩和丑陋。 或者，我將不得不在沒有類（直接分配的值）的情況下在 JS 中編寫全新的邊欄處理，包括。 響應變體（來自媒體查詢）。 也不好。 有沒有辦法動態計算 css 中的值？

任何的想法？ 一些鏈接就足夠了，我做了 rest。或者處理 CSS 內容的想法（不能是完整的代碼）

（最后應該在一個幫助頁面結束，側邊欄有一個目錄，通過 ajax 進行即時搜索，在主 div 中也通過 ajax 加載幫助內容。但我並不擔心這個部分，我以前構建過類似的東西 - 但如果我找到現成的東西，我不會拒絕;-)）

Answer 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
}

對 Sidebar-Example 腳本的更改：

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

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

這很好用。 缺點：

1. 淡入淡出后，側邊欄再次具有原來的寬度。
2. 側邊欄變小還是有問題
3. 拖動不是那么流暢

如果有人有更好的解決方案，那么我會很高興。