javascript - 如何自定义可调整大小的 div?
问题描述
我有一个可调整大小的 div,我希望它看起来像下图和 URL 中的示例:
https://bitmax.io/#/margin/usdt/btmx
我想在 div 的顶部中心显示可调整大小的光标指示器,而不是默认值(右下角)。
我的代码:-
.third-column-box-2 {
height: 100px;
width: 300px;
resize: vertical;
background: #ccc;
overflow: auto;
}
.third-column-box-2 ::-webkit-resizer {
background-color: red;
}
<div class="third-column-box-2">
<div class="table-responsive">
<table class="table table-bordered trade-table mt-0">
<thead>
<tr>
<th class="text-light-purple">Price(USDT)</th>
<th class="text-light-purple">Size</th>
<th class="text-light-purple">Time(USDT)</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="text-white"><i class="fa fa-star"></i> ETH/USDT </div>
</td>
<td>
<div class="text-white">411.42</div>
</td>
<td>
<div class="text-red">1181.468</div>
</td>
</tr>
<tr>
<td>
<div class="text-white"><i class="fa fa-star"></i> ETH/USDT </div>
</td>
<td>
<div class="text-white">411.42</div>
</td>
<td>
<div class="text-green">1181.468</div>
</td>
</tr>
<tr>
<td>
<div class="text-white"><i class="fa fa-star"></i> ETH/USDT </div>
</td>
<td>
<div class="text-white">411.42</div>
</td>
<td>
<div class="text-red">1181.468</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
解决方案
您可以使用下面的代码片段来满足您的要求。请注意span
使此可div
拖动的标签。您可以根据自己的需要和规格对其进行一些美化。我使用hiddenbar
id 来帮助使代码更加直观和直观;但您可以删除它以达到您想要的精确结果。
一般来说,这里需要注意的关键点是:
使用pageY属性使其可沿 NS 方向拖动。
跨度标签及其中心对齐有助于获得预期的外观。
其余代码是可以理解的(如果您知道JS
and jquery
,我想)。
var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
e.preventDefault();
dragging = true;
var main = $('#main');
var wrapper = $('#wrapper');
var hiddenbar = $('<div>',
{id:'hiddenbar',
css: {
width: main.outerWidth(),
top: e.pageY,
left: main.offset().left
}
}).appendTo('#wrapper');
$(document).mousemove(function(e){
hiddenbar.css("top", (e.pageY + 2));
});
});
$(document).mouseup(function(e){
if (dragging)
{
var percentage = ((e.pageY - $('#wrapper').offset().top) / $('#wrapper').height()) * 100;
var mainPercentage = 100-percentage;
$('#topbar').css("height",percentage + "%");
$('#main').css("height",mainPercentage + "%");
$('#hiddenbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
body,html{width:100%;height:100%;padding:0;margin:0;}
.clearfix:after {
content: '';
display: table;
clear: both;
}
#wrapper {
width: 600px;
margin: 50px auto 0 auto;
height: 300px;
background: yellow;
}
#main{
background-color: #FFB374;
height:40%;
width: 100%;
min-height: 30px;
max-height: calc(100% - 30px);
}
#topbar{
display: flex;
align-items: flex-end;
background-color: #6380C2;
width:100%;
height:60%;
overflow-y: hidden;
min-height: 30px;
max-height: calc(100% - 30px);
}
#dragbar{
background-color:black;
color:#fff;
border-radius: 0 0 4px 4px;
z-index:2;
width: 28px;
position:absolute;
left: 47%;
cursor: ns-resize;
}
#hiddenbar{
width: 100%;
height: 3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clearfix" id="wrapper">
<div id="topbar">
<span id="position"></span>
<div>
<span id="dragbar">===</span>
</div>
</div>
<div id="main"> <br/></br>This is One Of the sample div. You have to keep your tables over here. </div>
</div>
您还可以阅读这篇关于我在此处使用的各种属性和实现功能的精彩博客以获得更好的见解。
推荐阅读
- postfix-mta - Postfix 尝试从 root@info@domain.com 发送邮件
- reactjs - 如何使用 Jest 和测试库更改组件状态?
- angular - Angular:如何为 Angular 应用程序中的功能创建测试模块?
- python - 为什么python脚本线程不起作用?
- java - 解析由键“1”、“2”给出的隐式 JSON 列表
- android - Android中AutocompleteSupportFragment的样式文本颜色和提示颜色
- python - 如何从 PDB 文件中提取链 ID?
- linux - 如何显示给定目录中字符串中单词的基本名称、路径和出现次数?
- javascript - 查找具有相同类的最近元素
- database - 您的实时数据库有不安全的规则