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


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

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

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?


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

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

            <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');


                // Make the "DropTarget" DIV a drop target.
                var target = new Custom.UI.ColorDropTargetBehavior


Open in new window

Who is Participating?
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:
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.
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.