Skip to content

Instantly share code, notes, and snippets.

@nrdobie
Created September 4, 2012 19:43
Show Gist options
  • Save nrdobie/3625537 to your computer and use it in GitHub Desktop.
Save nrdobie/3625537 to your computer and use it in GitHub Desktop.
Drag-n-Drop CSS3 Circle
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"
/* 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; }
<div class='play-area'>
<div class='draggable'>
<span>Drag Me</span>
</div>
<div class='droppable'>
<span>Drop Here</span>
</div>
</div>
(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);
@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()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment