I have two div demo1 and demo2 .I need if I drag demo1 left to right and right to left in that time demo2 width automatically adjust . I tried this
我有两个div demo1和demo2。我需要将demo1从左到右拖动到那个时候demo2宽度自动调整。我试过这个
<div class="wrapper">
<div class="demo"></div>
<div class="demo2"></div>
</div>
<STYLE>
.demo {
float: left;
width: 50%;
height:100%;
background-color: red;
}
.demo2 {
float: left;
background-color: black;
width: 50%;
height:100%;
}</STYLE>
<script type="text/javascript">
(function(){
maxWidth=$('.wrapper').width();
$('.demo').resizable(function(e){
var x = e.pageX;
alert(x);
$(this).width(x);
$('.demo2').width(maxWidth-x);
});
})()
</script>
But when I drag demo1 left to right, demo2's width is not adjusting automatically . Please any one tell me what is wrong in my code.
但是当我从左向右拖动demo1时,demo2的宽度不会自动调整。请任何人告诉我我的代码有什么问题。
1 个解决方案
#1
0
I think you misunderstood the syntax. You can bind to the resize
event to do what you want:
我认为你误解了语法。您可以绑定到resize事件以执行您想要的操作:
(function () {
var maxWidth = $('.wrapper').width();
$('.demo').resizable({
resize: function (e, ui) {
var x = e.pageX;
$(this).width(x);
$('.demo2').width(maxWidth - x);;
}
});
})();
#1
0
I think you misunderstood the syntax. You can bind to the resize
event to do what you want:
我认为你误解了语法。您可以绑定到resize事件以执行您想要的操作:
(function () {
var maxWidth = $('.wrapper').width();
$('.demo').resizable({
resize: function (e, ui) {
var x = e.pageX;
$(this).width(x);
$('.demo2').width(maxWidth - x);;
}
});
})();