html - 下のテキストエリアと組み合わせたテキストエリアドラッグ

Question

質問 1:左上のテキストエリアを下にドラッグすると、左下のテキストエリアが落ちます。左下のテキストエリアを左上のテキストエリアと一緒に移動したい。これどうやってするの？

質問 2:右上のテキストエリアを下にドラッグすると、左下のテキストエリアが動き始めます。どうすればこれを防ぐことができますか?

http://jsfiddle.net/4BX6u/

<div class="container">
            <textarea class="area1"></textarea>
            <textarea class="area1"></textarea>
</div>

<div class="container">
            <textarea class="area1"></textarea>
            <textarea class="area1"></textarea>
</div>




.container
{
    width: 820px;
    height: 250px;
    margin: auto;
}

.area1
{
    width: 400px;
    height: 250px;
    background: white;
    color: black;
    float: left;
    resize: vertical;
}