jQuery Draggable div Позиция неуместна

Question

Я написал свою собственную кодировку, как в этом рабочем примере.

http://jsfiddle.net/uKqta/

Есть 2 проблемы, которые мне нужны некоторые указания на:

1. перетаскиваемую ДИВ не должен быть в состоянии тащить наверх и прикоснуться к границе. Он должен просто остановиться в точке, где минимальная высота верхнего div.

   min-height:50px; 
   

2. перетаскиваемая ДИВ фактически не слиплись с желтыми нижними делами. Он первоначально расположен сверху нижнего div. Это означает, что три div: верхний div, перетаскиваемый div и нижний div должны быть выровнены по вертикали.

JS:

$(function() { 
    $("#draggable").draggable({ 
     drag: function() { 
      var position = $("#draggable").position(); 
      var topPos = position.top; 
      var divHeight = 500; 
      var div1H = topPos; 
      var div3H = divHeight - topPos; 
      $('#div1').height(div1H); 
      $('#div3').height(div3H); 
     }, 
     axis: "y", 
     containment: "#divAll" 
    }); 
}); 

HTML:

<div id="divAll"> 
    <div id="div1"> 
     <table id="tbl1"> 
      <tr> 
       <td>top top top</td> 
      </tr> 
     </table> 
    </div> 
    <div id="draggable" class="handler_horizontal"></div> 
    <div id="div3"> 
     <table id="tbl2"> 
      <tr> 
       <td>bottom bottom bottom</td> 
      </tr> 
     </table> 
    </div> 
</div> 

CSS:

#divAll { 
    height:500px; 
    width:500px; 
    border:1px solid blue; 
    position: relative; 
} 
.handler_horizontal { 
    width:100%; 
    height: 8px; 
    cursor: row-resize; 
    left: 0; 
    background: url(http://jsfiddle.net/img/handle-h.png) 50% 3px no-repeat; 
    border:1px solid grey; 
    margin-bottom:50px; 
    position:absolute; 
} 
#div1 { 
    height:60%; 
    width:100%; 
    border:1px dotted green; 
    overflow:auto; 
    min-height:50px; 
    max-height:450px; 
    background-color: #eee; 
} 
#div3 { 
    width:100%; 
    height:37%; 
    border:1px dotted red; 
    overflow:auto; 
    min-height:50px; 
    max-height:450px; 
    background-color: yellow; 
} 
#tbl1, #tbl2 { 
    word-wrap:break-word; 
} 

Answer 1

Я заменил

axis: "y", 
containment: "#divAll" 

по

containment:[ 9, 50, 9, 450 ] 

, где защитная оболочка: [xLeft, yTop, xRight, yBottom] Таким образом, перетаскиваемым не идут выше 50px сверху и под 50px снизу. И в то время как оставаться на 9px (это будет делать вертикальный Align)

Fiddle: http://jsfiddle.net/uKqta/4/

Answer 2

Я бы рекомендовал заменить перетаскивать с изменяемым размером, как его немного лучше подходит для ваших нужд.

Working Example

$(function() { 
    $("#resizable").resizable({ 
     handles: "n", 
     maxHeight: 450, 
     minHeight: 50 
    }); 
    $("#resizable").scroll(function() { // keep the handle at the top of the resizable 
     $(".ui-resizable-handle").css('top', $("#resizable").scrollTop()); 
    }); 
}); 

Вы также можете проверить это, похоже, это может быть ваш следующий шаг:
jQuery UI Resizable alsoResize reverse