drag and resize

by dirkk0

HTML

<div id="resizable" class="content">
    <h3>Title</h3>
    <div id="handle" class="ui-resizable-handle ui-resizable-se"></div><p>Text ...</p>
</div>

<div id="m" class="dot" />

CSS

.content {border: 1px solid #00f9ee; background: #fbf9ee; position: relative;}

#resizable {
    width: 150px; height: 150px; padding: 0.5em; font-family: "Trebuchet MS", Verdana, sans-serif;
}
#resizable h3 {
    text-align: center; margin: 0; border: 1pt solid #0000ff; 
}

#handle {height: 10px; width: 10px; position:absolute; bottom:2px; right:2px; border: 1pt solid #0000ff; }

.dot { height: 10px; width: 10px; background-color:#0f0;position:absolute;left:220px;top:120px;}

JavaScript

$(function() {
    $("#resizable").resizable({handles: {'se': '#handle'}}).draggable();
    $("#m").draggable();
});