Droppable test

by mmarcon

HTML

<div id="container">
    <div class="drag-me">DRAG ME</div>
    <div id="drop-here-1" class="target">1</div>
    <div id="drop-here-2" class="target">2</div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Bowlby+One+SC&v2);

body {
    background-color: #e4e4db;
    font-family: helvetica;
}

#container {
    width: 400px;
    height: 400px;
    margin: 50px auto;
    background-color: #fff;
    box-shadow: 0 0 10px #666;
    border-radius: 4px;
    position: relative;
}

.target {
    border: 3px solid #e4e4db;
    position: absolute;
    border-radius: 10px;
    color: #e4e4db;
    font-family: 'Bowlby One SC', sans-serif;
    text-align: center;
    background-color: #fff;
}

#drop-here-1 {
    width: 150px;
    height: 150px;
    bottom: 10px;
    left: 50%;
    margin-left: -75px;
    font-size: 40px;
    z-index: 1000;
}

#drop-here-2 {
    width: 90px;
    height: 90px;
    bottom: 20px;
    left: 50%;
    margin-left: -45px;
    font-size: 30px;
    z-index: 1001;
}

.drag-me {
    width: 60px;
    height: 60px;
    cursor: move;
    border-radius: 30px;
    background-color: #ffa07a;
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -30px;
    font-size: 10px;
    color: #fff;
    line-height: 60px;
    text-align: center;
}

JavaScript

$(function(){
    $('.drag-me').draggable({
        helper: 'clone',
        zIndex: 1500
    });
    $('#drop-here-1').droppable({
        drop: function(){
            alert($(this).text());
        }
    });
    $('#drop-here-2').droppable({
        drop: function(){
            alert($(this).text());
        }
    });
});