Your mom's a Draggabilly

Derp

by Wray Bowling

HTML

<script src="http://draggabilly.desandro.com/draggabilly.pkgd.min.js"></script>
<h1>Duplicate a div, &amp; put your name on it.</h1>
  
<div class="drag" style="position: relative; left: 39px; top: 43px;">
  <img src="http://robohash.org/wray.png">
  <p>Wray</p>
</div>

<div class="drag" style="position: relative; left: 392px; top: -151px;">
  <img src="http://robohash.org/you.png">
  <p>You</p>
</div>

<div class="drag" style="position: relative; left: 392px; top: -151px;">
  <img src="http://robohash.org/yourmom.png">
  <p>Your mom</p>
</div>

CSS

body{
    font-family:Georgia;
    color:#b55513;
    background: url(http://subtlepatterns.com/patterns/ricepaper_v3.png);
    text-align:center;
  }

.drag{
    display:block;
    background:#daddad url(http://subtlepatterns.com/patterns/geometry.png);
    width:200px;
    height:200px;
    border:dashed 3px black;
    cursor:grab;
    cursor:-moz-grab;
    cursor:-webkit-grab;
    border-radius:25px;
    margin:0;
}

.drag img{
    width:100%;
    border-bottom:double 3px #b95821;
}

.drag > *{
    position:relative;
    top:-50px;
}

JavaScript

var elems = document.querySelectorAll('.drag');
  for ( var i=0, len = elems.length; i < len; i++ ) {
      var draggie = new Draggabilly( elems[i], {});
  }