如何拖动侧边栏
How to drag the sidebar?
我无法左右拖动侧边栏。我想增加和减少侧边栏时,它被拖到右边和左边。当我尝试增加或减少侧边栏的宽度时,它保持不变。没有发生任何变化。
var i = 0;
$('#dragbar').mousedown(function(e) {
e.preventDefault();
$('#mousestatus').html("mousedown" + i++);
$(document).mousemove(function(e) {
$('#position').html(e.pageX + ', ' + e.pageY);
$('#sidebar').css("width", e.pageX + 2);
$('#main').css("left", e.pageX + 2);
})
console.log("leaving mouseDown");
});
$(document).mouseup(function(e) {
$('#clickevent').html('in another mouseUp event' + i++);
$(document).unbind('mousemove');
});
#main {
background-color: BurlyWood;
float: right;
position: absolute;
top: 100px;
bottom: 38px;
right: 0;
left: 200px;
}
#sidebar {
background-color: IndianRed;
width: 200px;
float: left;
position: absolute;
top: 100px;
bottom: 38px;
overflow-y: hidden;
}
#footer {
background-color: PaleGoldenRod;
width: 100%;
height: 38px;
bottom: 0;
position: absolute;
}
#header {
background-color: wheat;
width: 100%;
height: 100px;
}
#dragbar {
background-color: black;
height: 100%;
float: right;
width: 3px;
cursor: col-resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
header
<span id="mousestatus"></span>
<span id="clickevent"></span>
</div>
<div id="sidebar">
<span id="position"></span>
<div id="dragbar"></div>
sidebar
</div>
<div id="main">
main
</div>
<div id="footer">
footer
</div>
using js
let sidebar = document.querySelector(".sidebar");
let content = document.querySelector(".content");
let dragholder = document.querySelector(".dragholder");
function onMouseMove(e){
sidebar.style.cssText = `width: ${ e.pageX }px`;
content.style.cssText = `width: ${ window.innerWidth - e.pageX }px`;
}
function onMouseDown(e){
document.addEventListener('mousemove',onMouseMove);
}
function onMouseUp(e){
document.removeEventListener('mousemove',onMouseMove);
}
dragholder.addEventListener('mousedown', onMouseDown);
dragholder.addEventListener('mouseup', onMouseUp);
content.addEventListener('mouseup', onMouseUp);
document.addEventListener('mouseup', onMouseUp);
body{
margin:0;
padding:0;
}
.container{
display:flex;
}
.sidebar{
background: lightgreen;
height: 100vh;
width: 20%;
position:relative;
}
.dragholder{
position:absolute;
height: 100px;
width: 5px;
background: blue;
right:0;
top:50%;
transform: translate(-50%, -50%);
border-radius: 80px;
}
.dragholder:hover{
cursor: move;
}
.content{
background:red;
height:100vh;
width: 80%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Drag bar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="dragholder"></div>
</div>
<div class="content"></div>
</div>
<script src="./index.js"></script>
</body>
</html>
你的脚本有多个问题。
#main
div与#sidebar
重叠,因此侧边栏的最右边缘不可见,也无法通过鼠标访问。因此,你的mousedown事件不会触发,因为它从未接收到一个mousedown。
这里有两件事要做:
#main
加z-index: 1
, #sidebar
加z-index: 2
。
同样,为了使你的拖拽手柄div合适,把它的css改成这样:
#dragbar {
background-color: black;
height: 100%;
width: 3px;
cursor: col-resize;
position: absolute;
right: 0;
top: 0;
}
请参阅下面的代码片段获取工作版本:
var i = 0;
$('#dragbar').mousedown(function(e) {
e.preventDefault();
$('#mousestatus').html("mousedown" + i++);
$(document).mousemove(function(e) {
$('#position').html(e.pageX + ', ' + e.pageY);
$('#sidebar').css("width", e.pageX + 2);
$('#main').css("left", e.pageX + 2);
})
console.log("leaving mouseDown");
});
$(document).mouseup(function(e) {
$('#clickevent').html('in another mouseUp event' + i++);
$(document).unbind('mousemove');
});
#main {
background-color: BurlyWood;
float: right;
position: absolute;
top: 100px;
bottom: 38px;
right: 0;
left: 200px;
z-index: 1;
}
#sidebar {
background-color: IndianRed;
width: 200px;
float: left;
position: absolute;
top: 100px;
bottom: 38px;
overflow-y: hidden;
z-index: 2;
}
#footer {
background-color: PaleGoldenRod;
width: 100%;
height: 38px;
bottom: 0;
position: absolute;
}
#header {
background-color: wheat;
width: 100%;
height: 100px;
}
#dragbar {
background-color: black;
height: 100%;
width: 3px;
cursor: col-resize;
position: absolute;
right: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
header
<span id="mousestatus"></span>
<span id="clickevent"></span>
</div>
<div id="sidebar">
<span id="position"></span>
<div id="dragbar"></div>
sidebar
</div>
<div id="main">
main
</div>
<div id="footer">
footer
</div>
相关文章:
- 当侧边栏很长时,滚动/固定侧边栏会被切断
- 创建带有侧边栏的谷歌地图
- 如何在显示侧边栏时禁用背景,单击除侧边栏之外的任何位置都会关闭侧边栏
- 在页脚处停止固定侧边栏-防止重叠
- 如何将javascript添加到Wordpress侧边栏中
- 如何正确地将数据发送到打开的Firefox侧边栏
- 如何制作侧边栏以增加其完整长度
- 固定位置侧边栏不滚动-设置内容的高度
- Firefox插件SDK:在侧边栏和主脚本之间通信对象
- 在上下文菜单项单击上显示侧边栏/弹出窗口的最佳方法是什么
- 如何将数组(Google应用程序脚本)返回到HTML侧边栏
- 切换传单侧边栏 V2
- 粘性侧边栏停止在页脚上方 30px
- 使用什么js函数来切换侧边栏
- 指定的侧边栏广播器无效 -- 有效的侧边栏广播器是什么样子的
- 向下滚动页面时在侧边栏中显示部分标题(也许使用 BS scrollspy?
- 火狐侧边栏获取标签网址
- 启用 JQuery 触摸的可拖动侧边栏
- 使侧边栏在拖动时可调整大小
- 如何拖动侧边栏