Jquery droppable

by navyflower

HTML

<div id="container">
    <div class="draggable1">
        <p>Draggable 1</p>
    </div>
    <div class="draggable2">
        <p>Draggable 2</p>
    </div>
    <div class="droppable1">
        <p>Droppable 1</p>
    </div>
    <div class="droppable2">
        <p>Droppable 2</p>
    </div>

CSS

#container {
    background: #DDD;
    height: 260px;
    position: relative;
    font-size: small;
}
.draggable1 {
    background: Lavender ;    
}
.draggable2 {
    background: MistyRose ;    
}
.draggable1, .draggable2 {
    width: 70px;
    height: 50px;
    padding: 0.5em;
    float: left;
    margin: 10px 10px 10px 0;
    cursor: move;
}
.droppable1, .droppable2 {
    background: Cornsilk ;
    width: 70px;
    height: 50px;
    padding: 0.5em;
    float: left;
    margin: 10px;
}

JavaScript

$(function () {
    function dropCallback(d, ui) {
        $(d)
            .find("p")
            .html("Dropped!");
    }
    $(".draggable1, .draggable2").draggable({
        revert: "invalid",
        helper: "clone"
    });
    $(".droppable1").droppable({
        accept: ".draggable1",
        drop: function (e, ui) {
            dropCallback(this, ui);
        }
    });
    $(".droppable2").droppable({
        accept: ".draggable2",
        drop: function (e, ui) {
            dropCallback(this, ui);
        }
    });
});