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>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
