如何创建包含可拖动拆分器的响应式 html div 元素？
Posted
技术标签:
【中文标题】如何创建包含可拖动拆分器的响应式 html div 元素？【英文标题】：how can i create a responsive html div element containing draggable splitters? 【发布时间】：2018-09-01 03:20:35 【问题描述】：我正在尝试使标准页眉/内容/页脚页面正常工作。
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
</head>
<body>
<div class="panel-container" style="display: flex; flex-direction: row;
flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; width: 100%; border: 1px solid silver; overflow: hidden; touch-action: none;">
<div class="A" style="flex: 0 0 auto;
padding: 10px; min-height: 200px; min-width: 10px; white-space: nowrap; background:#838383; color:white;">
A
</div>
<div class="A-splitter" style="flex: 0 0 auto;
width: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
min-height: 200px;
cursor: col-resize;">
</div>
<div class="D" style="flex: 1 1 auto;
padding: 10px;
min-height: 200px;
min-width: 200px;">
D
</div>
<script>
window.$ = window.jQuery = require('jquery');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript" crossorigin="anonymous"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.js"></script>
<script>
$(".A").resizable(
handleSelector: ".A-splitter",
resizeHeight: false,
onDrag: function(e, $el, newWidth, newHeight, opt)
$el.width(newWidth);
return false;
);
</script>
</html>
我在内容 div 中有 jquery 分隔符，但似乎无法确保 div D 的最小宽度。
这是迄今为止我最接近的解决方案。如果可以使用 Semantic-UI 干净地完成，将不胜感激。
谢谢！
【问题讨论】：
codepen.io/velociflapter/pen/JLNgYL?editors=1000 暂时不是拦截器。它可以通过 jquery-ui resizable 来完成，但是 Rick Strahl 的小型 jquery-resizable 也可以。 codepen.io/velociflapter/pen/JLNgYL。不确定在 Semantic-UI 布局中是否有一种干净的方法来执行此操作。 【参考方案1】：你的左边元素必须有position: absolute;。
您可以查看此示例：https://codepen.io/osublake/pen/azMONr
【讨论】：
以上是关于如何创建包含可拖动拆分器的响应式 html div 元素？的主要内容，如果未能解决你的问题，请参考以下文章
可选择和可拖动的 jQuery 以创建类似 Windows 资源管理器的窗口