Drag-n-Drop CSS3 Circle

drag-circle.coffee

jQuery ->
  $('#drag-circle .play-area .draggable').draggable
    containment: "parent"
  $('#drag-circle .play-area .droppable').droppable
    hoverClass: "drag-over"
    drop: (event, ui)->
      $(@).addClass "dropped"
      $(ui.draggable[0])
    activate: () ->
      $(@).removeClass "dropped"

drag-circle.css

/* line 3, projects/drag-circle.css.sass */
#drag-circle .play-area {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-box-align: center;
  box-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-box-pack: center;
  box-pack: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box; }
  /* line 8, projects/drag-circle.css.sass */
  #drag-circle .play-area div.draggable {
    background-color: black;
    border: 2px solid black;
    -webkit-border-radius: 250px;
    -moz-border-radius: 250px;
    -ms-border-radius: 250px;
    -o-border-radius: 250px;
    border-radius: 250px;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-box-align: center;
    box-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-box-pack: center;
    box-pack: center;
    cursor: move;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
    height: 60px;
    position: absolute;
    width: 60px;
    z-index: 2; }
    /* line 22, projects/drag-circle.css.sass */
    #drag-circle .play-area div.draggable span {
      color: white; }
    /* line 25, projects/drag-circle.css.sass */
    #drag-circle .play-area div.draggable:active {
      background-color: white; }
      /* line 28, projects/drag-circle.css.sass */
      #drag-circle .play-area div.draggable:active span {
        color: black; }
  /* line 31, projects/drag-circle.css.sass */
  #drag-circle .play-area div.droppable {
    background-color: #e1e1e8;
    border: 4px solid #aaaaaa;
    -webkit-border-radius: 250px;
    -moz-border-radius: 250px;
    -ms-border-radius: 250px;
    -o-border-radius: 250px;
    border-radius: 250px;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-box-align: center;
    box-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-box-pack: center;
    box-pack: center;
    cursor: normal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
    height: 100px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width: 100px;
    z-index: 1; }
    /* line 46, projects/drag-circle.css.sass */
    #drag-circle .play-area div.droppable span {
      color: #aaaaaa;
      font-size: 1.38462em;
      font-weight: bold;
      text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    /* line 54, projects/drag-circle.css.sass */
    #drag-circle .play-area div.droppable.drag-over {
      background-color: white;
      background: -webkit-gradient(radial, -15px -15px, 0, -15px -15px, 100, color-stop(0%, #ffffff), color-stop(100%, #eeeeee));
      background: -webkit-radial-gradient(-15px -15px, #ffffff, #eeeeee);
      background: -moz-radial-gradient(-15px -15px, #ffffff, #eeeeee);
      background: -o-radial-gradient(-15px -15px, #ffffff, #eeeeee);
      background: radial-gradient(-15px -15px, #ffffff, #eeeeee);
      border-color: #8899cc;
      border-width: 10px;
      height: 150px;
      width: 150px; }
      /* line 64, projects/drag-circle.css.sass */
      #drag-circle .play-area div.droppable.drag-over span {
        color: #333333;
        font-size: 1.92308em;
        text-shadow: 0px 0px 1px #aaaaaa; }
    /* line 70, projects/drag-circle.css.sass */
    #drag-circle .play-area div.droppable.dropped {
      background-color: white;
      background: -webkit-gradient(radial, -15px -15px, 0, -15px -15px, 100, color-stop(0%, #ffffff), color-stop(100%, #eeeeee));
      background: -webkit-radial-gradient(-15px -15px, #ffffff, #eeeeee);
      background: -moz-radial-gradient(-15px -15px, #ffffff, #eeeeee);
      background: -o-radial-gradient(-15px -15px, #ffffff, #eeeeee);
      background: radial-gradient(-15px -15px, #ffffff, #eeeeee);
      border-color: #8899cc;
      border-width: 5px; }
      /* line 78, projects/drag-circle.css.sass */
      #drag-circle .play-area div.droppable.dropped span {
        color: #333333;
        text-shadow: 0px 0px 1px #aaaaaa; }

drag-circle.html

<div class='play-area'>
  <div class='draggable'>
    <span>Drag Me</span>
  </div>
  <div class='droppable'>
    <span>Drop Here</span>
  </div>
</div>

drag-circle.js

(function() {

  jQuery(function() {
    $('#drag-circle .play-area .draggable').draggable({
      containment: "parent"
    });
    return $('#drag-circle .play-area .droppable').droppable({
      hoverClass: "drag-over",
      drop: function(event, ui) {
        $(this).addClass("dropped");
        return $(ui.draggable[0]);
      },
      activate: function() {
        return $(this).removeClass("dropped");
      }
    });
  });

}).call(this);

drag-circle.sass

@import "compass"

#drag-circle .play-area
  +box-align(       center)
  +box-pack(        center)
  +display-box

  div.draggable
    background:
      color:          #000
    border:           2px solid #000
    +border-radius(   250px)
    +box-align(       center)
    +box-pack(        center)
    cursor:           move
    +display-box
    height:           60px
    position:         absolute
    width:            60px
    z-index:          2

    span
      color: #fff

    &:active
      background:
        color:        #fff
      span
        color:        #000

  div.droppable
    background:
      color:          #e1e1e8
    border:           4px solid #aaa
    +border-radius(   250px)
    +box-align(       center)
    +box-pack(        center)
    cursor:           normal
    +display-box
    height:           100px
    +transition(      all .2s ease-in-out)
    width:            100px
    z-index:          1


    span
      color:          #aaa
      font:
        size:         1.38461538em
        weight:       bold
      +text-shadow(   1px 1px 1px rgba(255,255,255,0.5))
      +transition(    all .2s ease-in-out)

    &.drag-over
      background:
        color:        #fff
      +background(    radial-gradient(-15px -15px, #fff, #eee))
      border:
        color:        #89c
        width:        10px
      height:         150px
      width:          150px

      span
        color:        #333
        font:
          size:       1.92307692em
        +text-shadow()

    &.dropped
      background:
        color:        #fff
      +background(    radial-gradient(-15px -15px, #fff, #eee))
      border:
        color:        #89c
        width:        5px

      span
        color:        #333
        +text-shadow()