Dragable and Dropable

Dragable and Dropable


What I am working is that I have a list of names that comes from a
database, the list is displayed on the page. What users will need to
do is choose name and assign it a group by dragging the name from the
list a box that designates a particular group.
My problem is, when someone drops one name, then a second name in the
same box the names are not spaced, if I could space them with a comma
or even a new line that would be good.
From there when they submit their choices I need to know what group
the names were in and the specific ID of the names in the groups.
I hope that this made sense. I am wondering if this is even possible.
Here is what I have so far :
<script language="JavaScript" type="text/javascript" src="http://
ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="http://
ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></
script>
<script language="JavaScript" type="text/javascript">
$(document).ready( function()
{
    $("#DragWordList li").draggable({helper: 'clone'});
    $(".txtDropTarget").droppable({
        accept: "#DragWordList li",
        drop: function(ev, ui) {
            $(this).insertAtCaret(ui.draggable.text());
        }
    });
});
$.fn.insertAtCaret = function (myValue) {
    return this.each(function(){
            //IE support
            if (document.selection) {
                    this.focus();
                    sel = document.selection.createRange();
                    sel.text = myValue;
                    this.focus();
            }
            //MOZILLA / NETSCAPE support
            else if (this.selectionStart || this.selectionStart == '0') {
                    var startPos = this.selectionStart;
                    var endPos = this.selectionEnd;
                    var scrollTop = this.scrollTop;
                    this.value = this.value.substring(0, startPos)+ myValue+
this.value.substring(endPos,this.value.length);
                    this.focus();
                    this.selectionStart = startPos + myValue.length;
                    this.selectionEnd = startPos + myValue.length;
                    this.scrollTop = scrollTop;
            } else {
                    this.value += myValue;
                    this.focus();
            }
    });
};
</script>
<style>
<!--
#leftcolumn li
{
    cursor:pointer;
}
-->
</style>
<!--
//-->
</script>
<h2>This is a test page</h2>
<table width="650px;">
    <tr valign="top">
    <td style="padding-right:20px;">
    <div class="instructionPanel">
<div class="panelTop">
<div class="l"></div>
<div class="c"></div>
<div class="r"></div>
</div>
<div class="panelBody">
<div class="bodyContent">
<span style="font-size:12px; font-weight:bold;
text-decoration:underline;">Drag to insert from list below:</span>
<br />
<div id="leftcolumn">
<ul id="DragWordList" style="background-
color:#fff; padding:5px; list-style:none">
<li id="1">Bugs Bunny</li>
<li id="2">Daffy Duck</li>
<li id="3">Porky Pig</li>
<li id="4">Road Runner</li>
<li id="5">Elmer Fudd</li>
<li id="6">Yosemite Sam</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="panelBottom">
<div class="l"></div>
<div class="c"></div>
<div class="r"></div>
</div>
</div>
</td>
<td>
    <h3>Beneficiaries for Employee</h3>
     <textarea name="txtMessage" id="txtMessage"
class="txtDropTarget" cols="40" rows="10" style="margin-bottom:
10px;"></textarea>
     <h3>Beneficiaries for Spouse</h3>
<textarea name="txtMessage2" id="txtMessage2"
class="txtDropTarget" cols="40" rows="10" style="margin-bottom:
10px;"></textarea>
<h3>Beneficiaries for Children</h3>
<textarea name="txtMessage2" id="txtMessage2"
class="txtDropTarget" cols="40" rows="10"></textarea>
</td>
</tr>
</table>