JQuery UI draggable to adjust the divs size
Question
I have two divs, and I want them to share the 100% of the width of their parent. I also have a small divider in between, which allows them do dynamically resize them. But the total area must remain same. I have uploaded my solution: http://jsfiddle.net/aRQ7a/
However, because I decrease the size of the previous one, the slider goes back even further, they are not aligned properly. How can I fix this? My code is the below:
CSS:
* {
margin: 0px;
padding: 0px;
}
div {
display: inline-flex;
height: 300px;
padding: 0px;
margin: 0px;
}
#part1 {
width: 47%;
background-color: red;
}
#part2 {
width: 47%;
background-color: green;
}
.divider {
width: 5%;
background-color: blue;
}
HTML:
<body>
<div id="part1"></div>
<div class="divider"></div>
<div id="part2"></div>
</body>
Javascript:
$(function () {
var p1 = parseInt($("#part1").css("width"));
var p2 = parseInt($("#part2").css("width"));
$(".divider").draggable({
axis: "x",
containment: "parent",
scroll: false,
start: function(){
p1 = parseInt($("#part1").css("width"));
p2 = parseInt($("#part2").css("width"));
},
drag: function (event, ui) {
var a = parseInt($(this).css("left"));
$(this).prev().css("width", p1 + a);
$(this).next().css("width", p2 - a);
}
});
});
2 answers
solution1
2 ACCPTED 2013-12-06 14:13:32
Working demo http://jsfiddle.net/aRQ7a/2/
The problem was that when you dragged the divider, both the mouse and #part1 were affecting its position which is why it moved 2x the distance dragged. By setting that to position absolutely, we can stop it being affected by anything except the mouse.
By positioning #part2 to right:0, all we then need to do is get its width correct.
$(function () {
var p1 = parseInt($("#part1").width());
var p2 = parseInt($("#part2").width());
$(".divider").draggable({
axis: "x",
containment: "parent",
scroll: false,
drag: function () {
var a = parseInt($(this).position().left);
$("#part1").css({width:a});
$("#part2").css({width:p1 + p2 -a });
}
});
});
CSS
* {
margin: 0px;
padding: 0px;
}
div {
display: inline-block;
height: 300px;
}
#part1 {
position: absolute;
left:0;
width: 47%;
background-color: red;
}
#part2 {
position: absolute;
right:0;
width: 47%;
background-color: green;
}
.divider {
width: 5%;
position:absolute;
left: 47%;
background-color: blue;
}
Just one other thing. The divider is 5% width, but 2 x 47% leaves 6%. You may want this behavior, I can't guess that.
solution2
2 2013-12-06 14:15:56
Check this
js
$(function () {
var p1 = parseInt($("#part1").css("width"));
var p2 = parseInt($("#part2").css("width"));
var fullWidth= $('body').width();
var initialPos = parseInt($(".divider").css("left"));
$(".divider").draggable({
axis: "x",
containment: "parent",
scroll: false,
drag: function () {
var a = parseInt($(this).css("left"));
$("#part1").css("width", a);
$("#part2").css("width", fullWidth-a);
}
});
});
css
* {
margin: 0px;
padding: 0px;
}
div {
display: inline-block;
height: 300px;
}
#part1 {
position: absolute;
width: 47%;
background-color: red;
}
#part2 {
position: absolute;
right:0;
width: 47%;
background-color: green;
}
.divider {
width: 5%;
position:absolute;
left: 47%;
background-color: blue;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.