drag/drop into textarea

Drag and drop elements into a text area, where they bubble.

by Santosh Giridhara

HTML

<div class="droppable"><div id = "names"></div><textarea style = "width: 100%; height: 70%" placeholder = "Add commentary to this group..." class = "notes"></textarea>
</div>
<div class="droppable"><div id = "names"></div><textarea style = "width: 100%; height: 70%" placeholder = "Or add commentary to this group!" class = "notes"></textarea>
</div>

<ul style = "float: left">
    <li>Add any of the muppets to the groups by dragging them in.</li>
    <li class = "draggable">Elmo</li>
    <li class = "draggable">Ernie</li>
    <li class = "draggable">Floyd Pepper</li>
    <li class = "draggable">Robin the Frog</li>
    <li class = "draggable">Oscar the Grouch</li>
    <li class = "draggable">Dr. Teeth</li>
    <li class = "draggable">Burt</li>
    <li class = "draggable">Zoe</li>
    <li class = "draggable">Janice</li>
    <li class = "draggable">Cookie Monster</li>
</ul>

CSS

body{
    font-family: helvetica, arial, sans-serif;
    font-size: small;
}

.droppable { 
    width: 300px; 
    height: 150px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px; 
    background: #daeff4;
    white-space: pre-wrap;
}     

.draggable { 
    padding: 0.5em; 
    float: left; 
    margin: 10px 10px 0 0; 
    border: solid 1px #454545;
    background: white;
    white-space: nowrap;
}

draggable:hover{
    cursor: pointer;
}


.draggable_off{
    color: #bcbcbc;
    border: 1px solid #bcbcbc;
    background: #ededed;
}

.dragging{
    background: green;

}

.notes{
    background: none;
    margin-top:0;
    border: none;
    resize: none;
}

.name{
    background: white;
    border: 1px solid #cdcdcd;
    font-family: helvetica, arial, sans-serif;
    color: #437182;
    padding: 3px;
    margin: 3px;
    white-space: nowrap;
    float: left;
}

JavaScript

a$(function() {         
    $( ".draggable").draggable({
        helper: 'clone',
        cursor: 'pointer',
        start: function (ui){
            $(ui.helper).addClass("dragging");
        }
    });

    $( ".droppable" ).droppable({
        accept: ".draggable",                        
        drop: function( event, ui ) {
            var div = "<div class = 'name'>" + $(ui.draggable).html() + "</div>";
            $( this )
                .find("#names")
                .append(div);
            $( ui.draggable)
                .addClass("draggable_off")
                .draggable("disable");
                      
        }         
    });

});