Working on Draggable and Droppable

Using .draggable() and .droppable()

by FrictionlessPulley

HTML

<div class="menu">
    <div class="menu-item ui-dropable"><header>A<header/></div>
    <div class="menu-item ui-dropable"><header>B<header/></div>
    <div class="menu-item ui-dropable"><header>C<header/></div>
</div>

<div class="workspace">
    <header>Workspace</header>
</div>

CSS

.workspace{border:1px dotted;float:left;width:600px:height:600px;}
.menu-item { width:100px;height:100px;border:1px solid;backgroundcolor:'#cdcdcd'}
.menu-item-dragged {border:2px solid;background-color:'green'}

JavaScript

$(function() {
    $('.menu-item').draggable({
        activeClass:'menu-item=dragged'
    });

    $('.workspace').droppable({
        accept: '.menu-item'
    });
});