So draggable works, its just your code to append the text thats not
working as expected? If so, wrong list, use this instead:
http://groups.google.com/group/jquery-en/
Anyway, you probably just need to add the spaces to the string you append:
$(this).insertAtCaret(" " + ui.draggable.text());
Jörn
On Fri, Aug 21, 2009 at 8:50 PM, the intern<[email protected]> wrote:
>
> 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
-~----------~----~----~----~------~----~------~--~---
