jQuery Droppable Test

by xalvin11

HTML

<div id="test" class="sb-header">This is for Test</div>
<div class="droppable sb-header-mapped"></div>

CSS

.sb-header {
    width: 1004px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
    background-color: #000;
    font-family: sans-serif;
    font-size: 11px;
    color: #fff;
    z-index: 1000;
    cursor: pointer;
    border-radius: 5px;
    padding: 5px;
    padding-top: 10px;
    vertical-align: middle;
    top: 1px;
    display: inline-block;
    padding: 3px;
    margin: 2px 10px 2px 10px;
    width: 140px;
    background: #0077B3;
    border-top: #0099E6 solid 1px;
    border-left: #0099E6 solid 1px;
    border-bottom: #005580 solid 1px;
    border-right: #005580 solid 1px;
    box-shadow: 2px 2px 5px #888888;
    height: 30px;
    float: left;
    z-index: 1000;
    font-weight: bold;
    line-height: 100%;
}

.sb-header-mapped {
    display: block;
    float: left;
    border: 1px solid;
    min-height: 32px;
    width: 100%;
}

JavaScript

$('.sb-header').draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid",
    zIndex: 1000,
    opacity: 0.80
});

$(".droppable").droppable({
    over: function(event, ui) {
        $(this).css({
            'box-shadow': '0px 0px 3px #F5B800'
        });
    },
    out: function(event, ui) {
        $(this).css({
            'box-shadow': 'none'
        });
    },
    drop: function(event, ui) {
        var item = $(ui.draggable[0]);
        alert($(item).attr('id'));
        $(this).css({
            'box-shadow': 'none'
        });
    }
});