Javascript: Getting a Drag and Dropped item to put a value into a Textbox

Hi,

I am trying to insert a generated tag like <Gallery/> into a textbox, after an item called Gallery has been dragged and dropped into the textbox. I've researched using SetSelection() and half a dozen other methods, but they all seem far too complicated or unlikely to work properly.

The code I am using is a slightly modified version of Wicked Code from http://msdn.microsoft.com/en-us/magazine/cc135985.aspx.

At the heart of the matter, I will have something like this:
<td>
       <div id="RedDragSource" class="unselectable">Gallery</div>
 </td>

That gives the appearance of dragging and dropping just fine. However, putting the value "<Gallery/>" into a Textbox is an altogether different matter. How do I put the text into a plain jane TextBox at the mouse cursor?

And should I store the value "<Gallery.>" somewhere inside the <div> ,in a hidden field so I can modify it later?

Thanks,
Ryan



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DragDropDemo.aspx.cs" Inherits="DragDropDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.NET AJAX Drag-Drop Demo</title>
    <style>
    .unselectable {     -moz-user-select: -moz-none;     -khtml-user-select: none;     -webkit-user-select: none;     -o-user-select: none;     user-select: none; } 
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Name="PreviewScript.js" Assembly="Microsoft.Web.Preview" />
                    <asp:ScriptReference Name="PreviewDragDrop.js" Assembly="Microsoft.Web.Preview" />
                    <asp:ScriptReference Path="~/Scripts/ColorDragDrop.js" />
                </Scripts>
            </asp:ScriptManager>
            <fieldset>
                <legend>Pick a Control</legend>
                <table cellpadding="8" style="cursor:pointer">
                    <tr>
                        <!-- Drag sources -->
                        <td>
                            <div id="RedDragSource" class="unselectable">Gallery</div>
                        </td>
                        <td>
                            <div id="YellowDragSource" style=" height: 32px; background-color: yellow">Image</div>
                        </td>
                        <td>
                            <div id="GreenDragSource" style=" height: 32px; background-color: green">String</div>
                        </td>
                        <td>
                            <div id="MagentaDragSource" style=" height: 32px; background-color: magenta">Integer</div>
                        </td>
                        <td>
                            <div id="BlueDragSource" style=" height: 32px; background-color: blue">File</div>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <div style="width: 100%; height: 128px">
                &nbsp;</div>
            <fieldset>
                <legend>Editor</legend>
                <!-- Drop target -->
                <div id="DropTarget" style="width: 100%; height: 196px">
                    &nbsp;
                </div>
            </fieldset>

            <script type="text/javascript">
            function pageLoad()
            {
                //
                // Make the "DragSource" DIVs drag sources.
                //
                var source1 = new Custom.UI.ColorDragSourceBehavior
                    ($get('RedDragSource'), 'red');
                var source2 = new Custom.UI.ColorDragSourceBehavior
                    ($get('YellowDragSource'), 'yellow');
                var source3 = new Custom.UI.ColorDragSourceBehavior
                    ($get('GreenDragSource'), 'green');
                var source4 = new Custom.UI.ColorDragSourceBehavior
                    ($get('MagentaDragSource'), 'magenta');
                var source5 = new Custom.UI.ColorDragSourceBehavior
                    ($get('BlueDragSource'), 'blue');

                source1.initialize();
                source2.initialize();
                source3.initialize();
                source4.initialize();
                source5.initialize();

                //
                // Make the "DropTarget" DIV a drop target.
                //
                var target = new Custom.UI.ColorDropTargetBehavior
                    ($get('DropTarget'));
                target.initialize();
            }
            </script>

        </div>
    </form>
</body>
</html>

Open in new window

D-D.png
rossryanAsked:
Who is Participating?
 
MaxOvrdrv2Commented:
yes... use the div itself, and set a property in the click event for it... something like this:

<div id="RedDragSource" class="unselectable" onClick="JavaScript:SelectedTag='<Gallery>';">Gallery</div>

(SelectedTag being a global JS var)

as for getting the current cursor position and placing the tag in there, here's a useful link:
http://www.vbknowledgebase.com/?Id=109&Desc=Cursor-Position-in-Textbox-Using-JavaScript
0
 
Amandeep Singh BhullarCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.