两个div各占50％。使中间可拖动的变大或变小 [英] Two divs 50% each. Make middle draggable to make bigger or smaller
问题描述
p>
我希望能够做到这一点jQuery。
这是一个方法，我很快写道，虽然不使用jQuery。
< html xmlns =http：//www.w3 .ORG / 1999 / XHTML>
< head>
< title>示例滑块< / title>
< style type =text / css>
＃bar1 {
position：absolute;
背景：红色;
height：250px;
width：400px;
z-index：1;
}
＃bar2 {
position：absolute;
背景：绿色;
height：250px;
width：800px;
}
#slider {
position：relative;
背景：蓝色;
身高：100％;
width：10px;
float：right;
}
< / style>
< script type =text / javascript>
var down = false;
var mouse_x;
var interval;
var IE = document.all？true：false
if（！IE）document.captureEvents（Event.MOUSEMOVE）
document.onmousemove = get_mouse_x;
函数get_mouse_x（e）{
if（IE）
mouse_x = event.clientX;
else
mouse_x = e.pageX;
function drag（）{
interval = setInterval（update（），1）;
函数release（）{
clearInterval（interval）; $（b）b
函数update（）{
if（（mouse_x - document.getElementById（'bar1'）。offsetLeft）> = document.getElementById（'bar2'）。 offsetWidth）{
release（）;
document.getElementById（'bar1'）。style.width = document.getElementById（'bar2'）。offsetWidth +px;
} else if（mouse_x< = document.getElementById（'bar1'）。offsetLeft）{
release（）;
document.getElementById（'bar1'）。style.width = document.getElementById（'bar1'）。offsetLeft +px;
} else {
document.getElementById（'bar1'）。style.width =（mouse_x - document.getElementById（'bar1'）。offsetLeft）+px;
}
}
< / script>
< / head>
< body onmouseup =javascript：release（）;>
< div id =bar1>
< div id =slideronmousedown =javascript：drag（）;> < / DIV>
< / div>
< div id =bar2>< / div>
< / body>
< / html>
我不建议您在您的网站上使用它，而是从中学习或改进，以便它是完全稳定的。但希望这给你一个关于如何解决这个问题的想法。
在IE中还有一个错误，滑动后它不会失去滑块div的焦点。所以这意味着当你重新滑动它时，它不能正确释放。为了避免这种情况：在初始滑动之后，重点关注其他内容，然后再次滑动。除此之外，它工作正常。
希望这有助于某种方式：）
Alright everyone, is there a way to have 2 divs taking up 50% of the screen and have a bar in the middle so you can drag it and make the left 40% and the right 60% and vice versa.
I hope to be able to do this jquery.
Here's a method which I quickly wrote, this does not use jQuery though.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Slider</title>
<style type="text/css">
#bar1 {
position: absolute;
background: red;
height: 250px;
width: 400px;
z-index: 1;
}
#bar2 {
position: absolute;
background: green;
height: 250px;
width: 800px;
}
#slider {
position: relative;
background: blue;
height: 100%;
width: 10px;
float: right;
}
</style>
<script type="text/javascript">
var down = false;
var mouse_x;
var interval;
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = get_mouse_x;
function get_mouse_x(e) {
if (IE)
mouse_x = event.clientX;
else
mouse_x = e.pageX;
}
function drag() {
interval = setInterval("update()", 1);
}
function release() {
clearInterval(interval);
}
function update() {
if ((mouse_x - document.getElementById('bar1').offsetLeft) >= document.getElementById('bar2').offsetWidth) {
release();
document.getElementById('bar1').style.width = document.getElementById('bar2').offsetWidth + "px";
} else if (mouse_x <= document.getElementById('bar1').offsetLeft) {
release();
document.getElementById('bar1').style.width = document.getElementById('bar1').offsetLeft + "px";
} else {
document.getElementById('bar1').style.width = (mouse_x - document.getElementById('bar1').offsetLeft) + "px";
}
}
</script>
</head>
<body onmouseup="javascript:release();">
<div id="bar1">
<div id="slider" onmousedown="javascript:drag();"> </div>
</div>
<div id="bar2"></div>
</body>
</html>
I don't recommend you use that on your website, instead learn from it or improve so that it is completely stable. But hopefully that gives you an idea on how to tackle this problem.
Also there's a bug in IE where, after sliding, it does not lose focus from the slider div. So this means that when you re-slide it, it doesn't release properly. To avoid this: after initial sliding, focus something else, and then slide again. Other then that it works fine.
Hopefully this was helpful in some way :)
这篇关于两个div各占50％。使中间可拖动的变大或变小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
