Расширяемая панель div

Question

Я пытаюсь сделать несколько расширяемых вертикальных div/панелей. Вот несколько изображений, чтобы сделать их более понятными.

Красная линия представляет, где пользователь должен нажать и перетащить влево или вправо, и после перетаскивания влево, например, правая сторона должна показать больше содержания, точно так:

Can

кому-нибудь пост пример для этого? Благодарю.

Answer 1

jQuery UI предлагает эту функцию. Отъезд resizable на своем веб-сайте.

EDIT:Here - это способ сделать это с изменяемым размером jQuery UI. Обратите внимание, что трюк, чтобы заставить другого изменить размер, не jQuery; Я использую чистый CSS здесь:

div { 
    border: 1px solid black; 
    box-sizing: border-box; 
    height: 200px; 
} 
#content1 { 
    width: 50%; 
    float: left; 
} 
#content2 { 
    overflow: hidden; 
    float: none; 
} 

И в HTML, чтобы идти вместе с этим:

<div id="content1">Lorem ipsum dolor sit amet.</div> 
<div id="content2">Lorem ipsum dolor sit amet.</div> 

И Javascript:

$("#content1").resizable({ 
    handles: "e" 
}); 

Чтобы ограничить оба из div s' ширины, вам придется использовать статическую minWidth и динамическую maxWidth для изменяемого размера элемента. В этом случае, поскольку div s соответствует размеру окна, maxWidth будет шириной окна минус значение minWidth.

Here - пример.