Jquery UI draggable不会调整其他DIV的大小

在这个插入物中，我有三个DIV被另外两个可拖动的DIV （灰色）分开。 当向上/向下或向左/向右拖动可拖动的DIV ，应调整其他DIV的大小。

第一个可拖动的DIV工作正常（左侧的那个可以垂直调整其他DIV的大小）。 但是第二个可拖动的DIV不起作用，即使该方法与第一个可拖动的DIV相同。 任何想法如何解决这一问题？

使用Javascript

  var top1H, bottom1H; $( "#div1" ).draggable({ axis: "y", start: function(event, ui) { shiftInitial = ui.position.top; top1H = $("#top1").height(); bottom1H = $("#bottom1").height(); }, drag: function(event,ui) { var shift = ui.position.top; $("#top1").height(top1H + shift - shiftInitial); $("#bottom1").height(bottom1H - shift + shiftInitial); } }); var right1W, left1W; $( "#div2" ).draggable({ axis: "y", start: function(event, ui) { shiftInitial = ui.position.left; right1W = $("#right1").height(); left1W = $("#left1").height(); }, drag: function(event,ui) { var shift = ui.position.left; $("#right1").height(right1W + shift - shiftInitial); $("#left1").height(left1W - shift + shiftInitial); } }); 

HTML

CSS

 #div1 { width:180px; height:6px; background-color:#e0e0e0; cursor:ns-resize; position: absolute; } #div2{ width:6px; height:200px; background-color:#e0e0e0; float:left; cursor:ew-resize; } #top1{ width:180px; height:100px; background-color:orange; } #bottom1 { width:180px; height:100px; background-color:blue; } #left1{ width:180px; height:200px; float:left; background-color:orange; } #right1{ height:200px; background-color:red; width:100%; } 

Answer 1

既然你提到你第一次可拖动DIV工作正常我只修复了第二个。

您的代码有两个问题：

1. 你给了两个可拖动元素axis: "y"属性（而第二个应该是X轴上的grad。
2. 第二个拖动的变化应该在宽度上（而不是在高度上）。

 $(function() { var top1H, bottom1H; var right1W, left1W; $( "#div1" ).draggable({ axis: "y", start: function(event, ui) { shiftInitial = ui.position.top; top1H = $("#top1").height(); bottom1H = $("#bottom1").height(); }, drag: function(event,ui) { var shift = ui.position.top; $("#top1").height(top1H + shift - shiftInitial); $("#bottom1").height(bottom1H - shift + shiftInitial); } }); $( "#div2" ).draggable({ axis: "x", start: function(event, ui) { shiftInitial = ui.position.left; right1W = $("#right1").width(); left1W = $("#left1").width(); }, drag: function(event,ui) { var shift = ui.position.left; $("#left1 div").width(left1W + shift); } }); }); 

 #div1 { width:180px; height:6px; background-color:#e0e0e0; cursor:ns-resize; position: absolute; } #div2{ width:6px; height:200px; background-color:#e0e0e0; float:left; cursor:ew-resize; left: 180px; } #top1{ width:180px; height:100px; background-color:orange; } #bottom1 { width:180px; height:100px; background-color:blue; } #left1{ width:0; height:200px; float:left; background-color:orange; } #right1{ height:200px; background-color:red; width:100%; }