Draggable Stickies

Draggable stickyies using jQueryUI and CSS.

by jstnlowe

HTML

<div class="sticky draggable" style="left:10%;top:10%;transform:rotate(-2deg);">
  <div class="blue note">
    Here's another note with a different color, different starting position, and different rotation.</div>
</div>
<div class="sticky draggable" style="left:20%;top:5%;transform:rotate(4deg);">
  <div class="yellow note">This note floats above the text on the page. We can set its initial position and drag it around. Uses CSS and jQuery.</div>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel mattis nisl, quis placerat velit. Nulla hendrerit augue a gravida auctor. Sed quis mollis odio. Vivamus tempor venenatis metus, ac gravida nisi lobortis id. Morbi ac est libero. Maecenas
  facilisis bibendum eros. Integer laoreet felis ut elit varius, vel blandit nunc laoreet. Aliquam tempor porta nibh id finibus. Sed commodo a lectus in hendrerit. Cras non ligula et massa sodales auctor. Duis euismod non arcu a vestibulum. Sed in suscipit
  lectus. Phasellus aliquet, ante at auctor bibendum, sapien massa cursus nisi, quis rhoncus nisi purus in enim.</p>
<p>
  Sed ligula felis, maximus a sodales eu, dapibus ut nulla. Suspendisse at pharetra augue, sed vehicula dolor. Ut in suscipit lorem. Nunc scelerisque non eros id viverra. In et velit facilisis, efficitur quam a, fermentum sapien. Praesent eleifend metus
  eu blandit vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra, eros vitae porttitor fringilla, neque lorem malesuada mauris, at blandit enim ipsum sit amet nisi. Integer dictum sapien ut metus lobortis bibendum ut
  eu tortor. Morbi quis lectus quis dolor dictum fringilla et id neque. Vestibulum in sapien pretium, condimentum tellus eu, vehicula diam.
</p>

CSS

@import url('https://fonts.googleapis.com/css?family=Covered+By+Your+Grace');
.sticky {
  position: absolute;
}

.note {
  width: 200px;
  height: 190px;
  padding: 20px 10px;
  position: absolute;
  box-shadow: -1px 0px 2px 0px rgba(0, 0, 0, 0.40);
  font-family: 'Covered By Your Grace', cursive;
  font-size: 21px;
  text-align: center;
  border-bottom-right-radius: 60px 5px;
}

.note:after {
  content: "";
  z-index: -1;
  right: -0px;
  position: absolute;
  bottom: 20px;
  width: 200px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 2px 15px 4px rgba(0, 0, 0, 0.40);
  -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  -o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  transform: matrix(-1, -0.1, 0, 1, 0, 0);
}

.yellow {
  color: #000080;
  background: #ffff88;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(81%, #ffff88), color-stop(82%, #ffff88), color-stop(82%, #ffff88), color-stop(100%, #ffffc6));
  background: -webkit-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
  background: -o-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
  background: -ms-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
  background: linear-gradient(135deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
}

.blue {
  color: #000080;
  background: #88c4ff;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(81%, #88c4ff), color-stop(82%, #88c4ff), color-stop(82%, #88c4ff), color-stop(100%, #d5eaff));
  background: -webkit-linear-gradient(-45deg, #88c4ff 81%, #88c4ff 82%, #88c4ff 82%, #d5eaff 100%);
  background: -o-linear-gradient(-45deg, #88c4ff 81%, #88c4ff 82%, #88c4ff 82%, #d5eaff 100%);
  background: -ms-linear-gradient(-45deg, #88c4ff 81%, #88c4ff 82%, #88c4ff 82%, #d5eaff 100%);
  background: linear-gradient(135deg, #88c4ff 81%,...

JavaScript

$(".draggable").draggable();