jQuery UI. Dragg elem into another.

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<hr />
<textarea></textarea>

CSS

div {
 margin: 5px;
 border-radius: 3px;
 float: left;
 width: 40px;
 height: 40px;
 border: 1px solid #888;
 background-color: rgba(255,255,255,0.9);
 box-shadow: 3px 3px rgba(0,0,0,0.3);
}
hr {
 clear: left;
 margin: 5px;
}
textarea {
 margin-left: 5px;
 height: 100px;
 border: 3px solid #444;
 border-radius: 3px;
 background-color: #DDD;
}

JavaScript

$("div").draggable();

$("textarea").droppable({
    drop: function(e, ui) {
        switch ($(ui.draggable).text()) {
        case "5":
            $(this).append("Wow!");
            break;
        case "10":
            $(this).append("Oh!");
            break;
        default:
            break;
        }
        $(this).append("Element with " + $(ui.draggable).text() + ";\n");
        $(ui.draggable).off().hide(500, function() {
            $(this).remove();
        });
    }
});