极客观点
项目管理
HarmonyOS
设置left值，handle位置不会变化
部分样式：
.view .code,
.view .example {
position: absolute;
top: 0px;
left: 0px;
background-image: url("assets/img/1.jpg");
background-color: #f3f3f3;
background-repeat: no-repeat;
background-size: 500px;
width: 100%;
height: 100%;
}代码：
<body>
<div class="container">
<div class="view">
<div class="code">world</div>
<div class="example">hello2</div>
<div class="handle" >
<div class="tracker"></div>
</div>
</div>
</div>
<script>
var app = {
html: {
handle: document.querySelectorAll('.handle')[0],
tracker: document.querySelectorAll('.handle .tracker')[0],
code: document.querySelectorAll('.code')[0],
view: document.querySelectorAll('.view')[0],
example: document.querySelectorAll('.example')[0],
container: document.querySelectorAll('.container')[0]
},
dragging: false,
init: function() {
this.addEvents()
this.move(250)
},
addEvents: function() {
var that = this
this.html.handle.addEventListener('mousedown', function() {
that.html.tracker.style.display = 'block'
that.dragging = true
})
this.html.tracker.addEventListener('mouseup', function() {
that.html.tracker.style.display = 'none'
that.dragging = false
})
this.html.tracker.addEventListener('mousemove', function(event) {
var cBox = that.html.container.getBoundingClientRect();
var hBox = that.html.handle.getBoundingClientRect();
var newX = event.clientX - cBox.left
if(newX > cBox.width - hBox.width)
newX = cBox.width - hBox.width
if(newX < 0)
newX = 0
that.move(newX)
})
},
move: function(x) {
this.html.handle.style.left = x + 'px'
this.html.example.style.width = (x) + 'px'
}
}
app.init();
</script>
</body>
code和example是absolute的，改了left值跟handle有什么关系。而且code和example设置了absolute已经脱离文本流了，不会挤到handle的