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

Posted on 2011-05-11
Last Modified: 2012-06-27

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

Question by:rossryan
    LVL 10

    Accepted Solution

    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:
    LVL 19

    Expert Comment

    by:Amandeep Singh Bhullar
    This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
    A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now