Изменяемый размер пользовательского интерфейса jQuery для перемещения элемента DOM

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

Вот мой jsfiddle. Перетащите верхний край или верхний правый угол, и div переместится к верхнему краю экрана, иногда даже частично от экрана.

HTML:

<div id='chat'>
    <div id='content'></div>
    <input id='field' type='text' value='',placeholder='' />
</div>

CSS:

#chat {
    background-color: rgba(0,0,0,0.8);
    min-width: 400px;
    min-height: 200px;
    position: fixed !important;
    bottom: 10px !important;
    left: 10px;
    padding: 5px;
    color: white;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
}

#content {
    position: absolute;
    overflow-y: scroll;
    top: 5px;
    bottom: 30px;
    left: 5px;
    right: 5px;
    font-family: verdana;
    font-size: 8pt;
}

#field {
    position: absolute;
    left: 5px;
    bottom: 5px;
    background-color: rgba(0,0,0,0);
    color: white;
    border-width: 1px;
    outline: 0;
    font-family: verdana;
    font-size: 8pt;
}

JS/JQuery:

window.onload = function() {
    $('#field').each(function(){
        $(this).width($(this).parent().width()-4);
    });

    $('#chat').resizable({
        handles: 'n, ne, e',
        resize: function(event, ui) {
            $(this).css({left:'10px'}),
            $(this).css({bottom:'10px'}),
            $('#field').width($('#field').parent().width()-4);
        }
    });    
    var handles = $('#chat').resizable('option', 'handles');
    $('#chat').resizable('option', 'handles', 'n, ne, e');
}