Draggable (and Resizable) <div> using jQuery

Resources for a tutorial by Benedict Lewis.

by Petr Haluza

HTML

<div class="parent">
    <div class="child">
      <div class="child-test1">hlavicka</div>
      <div class="child-boxes">
        <div class="child-box">box</div>
        <div class="child-box">box</div>
        <div class="child-box">box</div>
        <div class="child-box">box</div>
        <div class="child-box">box</div>
        <div class="child-box">box</div>
      </div>
    </div>
</div>

CSS

.parent {
    position: relative;
    width: 100%;
    min-height:200px;
    background:#f5f5f5;
}
.child {
    width: 200px;
    height: 100%;
    outline: 1px solid #ccc;
    background: #ccc;
    display:table;
    margin:0 auto;
    
}
.child-test1 {width:100%; background-color:green;}
.child-boxes {display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}
.child-box {float:left; width:150px; background:red;
display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}

JavaScript

$('.child').resizable({
    handles: 'e',minWidth: 200, maxWidth: 800
});