Custom draggable "popover"

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<div id="row" class="row">
     <h2 data-bind="text: theValue">Nothing</h2>

    <div id="drag">
<a href="#" id="test" class="btn btn-large btn-danger">Toggle custom popover</a>

    </div>
</div>
<div class="pop">
    <div class="pop-header">
        <div class="row">Header / Title
            <button id="closePop" type="button" class="close" aria-hidden="true">&times;</button>
        </div>
    </div>
    <div class="pop-content">
        <div class="row">
             <h2>Content here!</h2>

            <input class="input-medium" type="text" data-bind="value: someValue" />
            <button class="btn btn-primary" data-bind="click: setValue" style="margin-bottom: 10px;">Set</button>
        </div>
    </div>
    <div class="pop-footer">
        <div class="row">And this is footer..</div>
    </div>
</div>

CSS

#row {
    margin-top: 130px;
    margin-left: 130px;
}
.pop {
    min-width: 50px;
    min-height: 250px;
    border-width: 1px;
    border-style: solid;
    border-color: lightgrey;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 5px 5px 3px #888888;
    
    display: none;
}
.pop-header {
    border-style: none;
    min-height: 20px;
    padding: 10px;
    font-weight: bold;
    background-color: #f5f5f5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    cursor: move;
}
.pop-content {
    background-color: white;
    min-height: 150px;
    padding: 10px;
}
.pop-footer {
    height: 20px;
    background-color: #f5f5f5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    padding: 10px;
}